如何使用引导程序在按钮之间提供间距答案

【问题标题】：How to give spacing between buttons using bootstrap如何使用引导程序在按钮之间提供间距
【发布时间】：2015-02-25 16:50:36
【问题描述】：

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

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

【问题讨论】：

是的，或者你可以使用 col-sm-offset 或类似的东西
按钮大小应该是独立的。看看伙计们（www.bootply.com/dDfIHeZizW），如果我改变按钮的宽度，它们的对齐方式会失真。
在尝试了各种解决方案并在##bootstrap IRC 上获得其他人的反馈后，我决定暂时使用margin-left。谢谢你们……
这是正确答案：stackoverflow.com/a/11216667/670229
How can I make space between two buttons in same div?的可能重复

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

引导层：http://www.bootply.com/ugeXrxpPvD

【讨论】：

@brauliobo 将您的答案添加为答案，因为我相信这是正确的答案。

【解决方案3】：

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

这将提供永久间距。

【讨论】：

但如果我使用 class='col-xs-2' 而不是 class='col-xs-3' 方向会扭曲..
当您希望按钮在较小的分辨率下相互包裹时，这也很有帮助。 “要将您的内容嵌套在默认网格中，请在现有的 .col-sm-* 列中添加一个新的 .row 和一组 .col-sm-* 列。” - 来源：getbootstrap.com/docs/3.4/css

【解决方案4】：

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

【讨论】：

尽管没有明确提及，但 OP 意味着他们希望在按钮上连续设置排水沟。此解决方案将破坏引导程序的网格，导致总和为 100% 宽度的按钮开始换行。

【解决方案5】：

对所有按钮使用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;
}

【讨论】：

btn-primary-spacing 的类从何而来？
看起来像一个自定义实现。一些代码在这里会很好

【解决方案6】：

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

【讨论】：

这不适用于带有折叠按钮（每行每个按钮）的移动设备

【解决方案7】：

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

【讨论】：

【解决方案8】：

为按钮添加边距使其更宽，以便 les 按钮适合网格系统。如果只有视觉效果很重要，则为按钮设置一个带有 [style="margin:0px;border:solid white;"] 的白色边框，这样按钮宽度不受影响。

【讨论】：

【解决方案9】：

原始代码大部分都在那里，但每个按钮周围都需要btn-groups。在 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>

【讨论】：

我实现了这个，但它没有为按钮提供垂直间距，当它们包裹成两行/“行”时，这对我来说很明显。

【解决方案10】：

你可以通过使用引导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阅读更多内容。

【讨论】：

刚刚添加了 mr-1 和繁荣。谢谢@A.Raza。
这是 bootstrap4
是的，这是针对“twbs 4.x”的。
谢谢，这正是我要找的！
此回复必须标记为正确的解决方案，特别是来自 Spacing getbootstrap.com/docs/4.0/utilities/spacing 的引导原生 mr-* 类

【解决方案11】：

我的 html 很差，但我在按钮之间使用了&nbsp;，效果很好。

【讨论】：

奇怪的是，这对我来说比上面更复杂的解决方案要好得多。

【解决方案12】：

根据引导版本不同

如果你正在使用

引导程序 4

先生-1

更多请参考官方Bootsrap 4 margin-and-padding link

引导程序 5

我-1

更多请参考官方Bootsrap 5 margin-and-padding link

【讨论】：