如何使用引导程序给按钮之间留出间距

我想给按钮之间留一个间距，有没有一种方法可以使用自举来给间隔，以便它们在不同的屏幕分辨率下保持一致。

我尝试使用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;
}

您可以使用bootstrap Spacing实现。Bootstrap间距包括各种速记响应边距和填充。在下面的示例中，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上阅读更多内容。

HTML：

<input id="id_ok" class="btn btn-space" value="OK" type="button">
<input id="id_cancel" class="btn btn-space" value="Cancel" type="button">

CSS：

.btn-space {
    margin-right: 5px;
}

1. 将您的按钮包装在div中class='col-xs-3'（例如）。
2. 添加class="btn-block"到您的按钮。

这将提供永久的间距。

如果要使用边距，请删除每个按钮上的类，然后使用：last-child CSS选择器。

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">
      <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">
      <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">
      <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">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

CSS：

.btn-toolbar .btn{
    margin-right: 5px;
}
.btn-toolbar .btn:last-child{
    margin-right: 0;
}

取决于您想要多少空间。我不确定我是否同意在每一个之间添加“ col-XX-1”的逻辑，因为然后您将在每一个之间定义整个“列”。

如果您只想在每个按钮之间留一点间距，我想在包围的行中添加填充。这样，我仍然可以使用所有12列，同时在每个按钮之间都包含一个“空格”。

Bootply：http：//www.bootply.com/ugeXrxpPvD

btn-primary-spacing对所有按钮使用类别删除margin-left类别

范例：

<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>

CSS将像：

.btn-primary-spacing 
{
margin-right: 5px;
margin-bottom: 5px !important;
}

您可以使用Bootstrap中的内置间距，因此在那里不需要其他CSS。这是用于Bootstrap 4的。

在按钮上增加页边距使其更宽，从而使按钮适合网格系统。如果仅视觉效果很重要，则为按钮提供一个白色边框，边框为[style =“ margin：0px; border：solid white;”]，这不会影响按钮的宽度。

原始代码大部分在那儿，但是btn-group每个按钮周围都需要。在Bootstrap 3中，您可以使用btn-toolbar和btn-group来完成工作。我尚未完成BS4，但它具有类似的构造。

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 1</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 2</button>
  </div>
</div>

我对html很不好，但是我 在按钮之间使用了它，效果很好。

使用引导程序，您可以<div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div>在按钮之间添加 。