在移动设备中使用引导程序无法正确显示按钮

Question

我正在使用引导按钮。这是我的代码：

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

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

在移动设备中，它们应该与它们之间的空间水平对齐，如下图所示：

但移动设备中的对齐方式与桌面相同。我可以在这里做些什么改变才能让它在移动设备上运行？

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

希望有所帮助。