html - 如何使用 Bootstrap 在按钮之间设置间距

Question

我想在按钮之间设置间距，有没有一种方法可以使用 bootstrap 设置间距，以便它们在不同的屏幕分辨率下保持一致。

我试过使用 margin-left 但这是正确的方法吗？？

这是 demo

HTML:

<div class="btn-toolbar text-center well">
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

CSS:

.margin-left{
    margin-left: 80px !important;
}

Answer 1

您可以通过使用 bootstrap Spacing 来实现。 Bootstrap Spacing 包括范围广泛的速记响应边距和填充。在下面的示例中，mr-1 将 margin 或 padding 设置为 $spacer * .25。

例子:

<button class="btn btn-outline-primary mr-1" href="#">Sign up</button>
<button class="btn btn-outline-primary" href="#">Login</button>

您可以在 Bootstrap Spacing 阅读更多内容.