Question

我想在按钮之间给出间距是否有办法使用引导程序给出间距，以便它们对于不同的屏幕分辨率是一致的。

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

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

Answer 2

您可以使用bootstrap 间距来实现。 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 Sapcing。

Answer 3

使用class='col-xs-3'（例如）将您的按钮包裹在div中。
将class="btn-block"添加到按钮。

这将提供永久间距。

Answer 4

如果您想使用保证金，请删除每个按钮上的课程并使用：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;
}

Answer 5

取决于你想要多少空间。我不确定我同意添加＆＃34; col-XX-1＆＃34;在每一个之间，因为你正在定义一个完整的＆＃34;列＆＃34;在每一个之间。

如果你只是想要＆＃34;一点距离＆＃34;在每个按钮之间，我喜欢在包含行中添加填充。这样，我仍然可以使用所有12列，同时包括一个＆＃34;空间＆＃34;在每个按钮之间。

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

Answer 6

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

Answer 7

您可以使用内置spacing from Bootstrap，因此不需要额外的CSS。这是Bootstrap 4。

Answer 8

为按钮添加边距使其更宽，以便les按钮适合网格系统。如果只有视觉效果很重要，那么给按钮一个白色边框[style =＆＃34; margin：0px;边框：纯白色;＆＃34;]这使按钮宽度不受影响。

Answer 9

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

Answer 10

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

Answer 11

原始代码主要在那里，但每个按钮周围需要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>

如何使用bootstrap在按钮之间给出间距

11 个答案: