当按钮在responsible上从水平布局变为垂直布局时，如何添加空间

Question

我已经在这个问题上纠结了一段时间，似乎无法解决。使用引导程序。

在我的网页上，当我使用电脑屏幕时，我的按钮并排出现，每个按钮之间都有一个间隙。这看起来很完美。

现在，当我在手机屏幕上查看时，按钮会垂直出现，一个在一个上面，这就是我想要的。问题是按钮之间没有空间。它们似乎垂直地粘在一起，我已经想了一段时间如何创造这个空间。

<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;
}
}

Answer 1

您的媒体查询将是@media only screen and (max-width: 600px) {...}

Answer 2

我认为对于移动屏幕，您可以使用max-width: 600px而不是min-width，因为min-width: 600px的屏幕大小将达到600px，而max-width: 600px的目标屏幕大小将低于600px