如何使用引导程序在按钮之间设置间距

Question

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

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

这是 演示

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

原文由 Vaibhav Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过使用 bootstrap Spacing 来实现。 Bootstrap Spacing 包括范围广泛的速记响应边距和填充。 In below example mr-1 set the margin or padding to $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 阅读更多内容。

原文由 Asif Raza 发布，翻译遵循 CC BY-SA 4.0 许可协议