logo标签列表

如何使用Bootstrap在按钮之间添加间距

htmlcsstwitter-bootstrap
109

我希望在按钮之间留出空白，是否有使用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:

（CSS层叠样式表）
.margin-left{
    margin-left: 80px !important;
}
是的，你可以使用col-sm-offset或类似的东西。 - ppascualv
按钮大小应该是独立的。大家可以看一下这个链接（www.bootply.com/dDfIHeZizW），如果我改变按钮的宽度，它们的对齐会变得扭曲。 - Vaibhav Jain
在尝试了各种解决方案并从##bootstrap IRC上得到其他人的反馈后，我决定现在采用margin-left。谢谢大家... - Vaibhav Jain
2
这是正确的答案：https://dev59.com/2mgu5IYBdhLWcg3wloC_#11216667 - brauliobo
可能是重复的问题：如何在同一div内的两个按钮之间留出空间？ - Mario Trucco
12个回答
144

您可以使用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 Spacing中阅读更多信息。

11
刚添加了Mr-1，然后就完成了。感谢@A.Raza。 - ImFarhad
10
这是关于Bootstrap4的内容。 - Muhammad Hassaan
3
谢谢，这正是我所寻找的！ - Nahue Gonzalez
1
这个回复必须被标记为正确的解决方案，特别是来自间距 Spacing 的 Bootstrap 原生 mr-* 类。https://getbootstrap.com/docs/4.0/utilities/spacing/ - Robert
9
Bootstrap5，您可以使用 m-1 或 ms-1 或 me-1（开始/结束） - jsgoupil
显示剩余4条评论
73

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
尽管没有明确提到，但 OP 的意思是他们想要在一行按钮上有排水沟。这个解决方案将破坏 Bootstrap 的网格系统，导致按钮的总宽度达到 100% 时开始换行。 - papiro
22
14
  1. 将您的按钮包装在一个带有 class='col-xs-3' 的 div 中（例如）。
  2. 为您的按钮添加 class="btn-block"。

这将提供永久间距。

但是如果我使用class='col-xs-2'而不是class='col-xs-3'，方向会失真。 - Vaibhav Jain
这也有助于在较小的分辨率下使按钮彼此包裹。"要将默认网格嵌套到您的内容中，请在现有的.col-sm-*列内添加一个新的.row和一组.col-sm-*列。" -来源：https://getbootstrap.com/docs/3.4/css/ - Fanky
11
如果您想使用 margin，请删除每个按钮上的类，并使用 :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;
}
这在移动设备上不起作用，因为按钮会折叠成一行。 - Botea Florin
6
我在HTML方面不太擅长，但我在按钮之间使用了&nbsp;，它很好用。
2
奇怪的是，这对我来说比上面更复杂的解决方案要好得多。 - Max von Hippel
4

使用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;
}
2
btn-primary-spacing类从哪里来？ - RobDil
1
看起来是自定义实现。这里提供一些代码会更好。 - Markus Graf
4
原始代码基本上都在那里，但你需要将每个按钮周围放置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>
我已经实现了这个功能，但是它没有为按钮提供垂直间距，在按钮换行/分成两行时这一点非常明显。 - LeeC
如果您将它们全部放在一个btn-toolbar中，这就足够了！例如：<div class="btn-toolbar" role="toolbar"> <button class="btn btn-default">按钮1</button> <button class="btn btn-default">按钮2</button> </div> - belka
4
根据您需要的空间大小而定。我不确定在每个按钮之间添加“col-XX-1”的逻辑是否正确，因为这样您就在每个按钮之间定义了整个“列”。
如果您只想在每个按钮之间添加“一点间距”，我喜欢在包含行中添加填充。这样，我仍然可以使用所有12列，同时在每个按钮之间包括一个“空格”。
Bootply: http://www.bootply.com/ugeXrxpPvD
@brauliobo 把你的答案添加为回答，因为我相信那是正确的。 - ganders
4
你可以使用内置的 Bootstrap间距 ，无需添加额外的 CSS。这适用于 Bootstrap 4。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接