css - 在移动设备中使用 Bootstrap 无法正确显示按钮

Question

我正在使用 Bootstrap 按钮。这是我的代码:

<div class="form-group padding-left-off padding-right-0 col-xs-12 margin-t-20">
    <a role="button" class="margin-t-0 btn btn-danger btn-block js-continue-btn  xs-width-45p  pull-left" data-attr="js-tab2" href="#">Btn1</a>
    <a role="button" class="margin-t-0 btn btn-danger btn-block js-continue-btn pull-right xs-width-50p " data-attr="js-tab2" href="#">Btn2 </a>
</div>

在桌面上，它们看起来垂直对齐，它们之间没有空间，就像这张照片一样。这就是我希望它们出现的方式:

在 Mobile 中，它们应该水平对齐，它们之间有空间，如下图所示:

但移动设备中的对齐方式看起来与桌面设备相同。我可以在此处进行哪些更改以使其在移动设备上运行？

Answer 1

根据您希望媒体查询中断的时间，您可以添加以下 CSS 来执行您想要的操作，我只是将其添加到 767px 或更小

@media (max-width: 767px) {
.btn-block {
    width: auto;
    padding: 5px 30px;
    float: left !important;
    margin: 0 15px 0 0 !important;
 }
}

这是一个JSFIDDLE BEMO

希望对您有所帮助。