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

Question

我想在按钮之间给出间距，有没有一种方法可以使用引导程序给出间距，以便它们在不同的屏幕分辨率下保持一致。

我尝试使用

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

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阅读更多内容。

Answer 2

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 3

根据 bootstrap 版本不同

如果您正在使用

引导程序4

先生-1

有关更多信息，请参阅官方 Bootstrap 4 margin-and-padding 链接

引导5

我-1

有关更多信息，请参阅官方 Bootstrap 5 margin-and-padding 链接

Answer 4

1. 用

   class='col-xs-3'

   将按钮包裹在 div 中（例如）。
2. 将

   class="btn-block"

   添加到您的按钮。

这将提供永久的间距。

Answer 5

如果您想使用边距，请删除每个按钮上的类并使用 :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 6

我不太擅长 html，但我在按钮之间使用了

 

并且效果很好。

Answer 7

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

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

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

Answer 8

对所有按钮使用

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 9

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

Answer 10

原始代码大部分都在那里，但每个按钮周围都需要

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>

Answer 11

为按钮添加边距使其更宽，以便按钮适合网格系统。如果仅视觉效果很重要，则为按钮提供白色边框 [style="margin:0px; border:solid white;"] 这将使按钮宽度不受影响。

Answer 12

使用 bootstrap，您可以在按钮之间添加

<div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div>

。