当响应式按钮从水平布局变为垂直布局时，如何添加空格？
当响应式按钮从水平布局变为垂直布局时，如何添加空格？
提问于 2020-03-14 20:47:57
我已经在这个问题上卡住了一段时间，似乎找不到答案。使用引导。
在我的网页上，当我使用电脑屏幕时，我的按钮并排出现，每个按钮之间有一个间隙。这看起来很完美。
现在，当我在移动屏幕上查看时，按钮垂直出现，一个接一个地显示，这就是我想要的。问题是按钮之间没有空格。看起来它们垂直地粘合在一起，我已经尝试了一段时间来创造这个空间。
<a href="https://www.eventbrite.co.uk/e/xx-xx"> <button type="button" class="custombtn">View Our Workshop </button> </a>
<a href="courses/course-BRFAITC009"> <button type="button" class="custombtn">View Our Online Course</button> </a>
<button type="button" class="custombtn" id="checkout-button-sku_GtmnPXrxkiDt4F" role="link">Retake Online Examination</button>
</div>
.course-btns {
width: 100%;
display: inline;
}
.custombtn {
margin-right:1em;
margin-top: 1em;
margin-bottom:1em;
}
@media only screen and (min-width: 600px) {
.course-btns {
display: block;
}
.custombtn {
margin-bottom:1em;
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-14 20:51:15
我认为对于移动屏幕，你可以使用max-width: 600px而不是min-width，因为min-width: 600px的目标屏幕尺寸将达到600px，而max-width: 600px的目标屏幕尺寸将低于600px
Stack Overflow用户
发布于 2020-03-14 20:50:47
您的媒体查询应该是@media only screen and (max-width: 600px) {...}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60682909
复制相关文章
相似问题
腾讯云开发者
