如何在使用 btn-group-justified 时添加按钮之间的间距？答案

【问题标题】：How can I add spacing between buttons while using btn-group-justified?如何在使用 btn-group-justified 时添加按钮之间的间距？
【发布时间】：2016-04-21 04:22:06
【问题描述】：

我正在使用引导程序的类

  <div class="btn-group btn-group-justified">

按钮本身就是完美的（我需要它们等距并占据全长），但我希望它们之间有一点空间。我尝试使用边距、宽度百分比和填充，但没有成功。

请查看此代码笔http://codepen.io/crhistian/pen/WwyWYM?editors=0100

【问题讨论】：

如果你想要它们之间的空间，把它们放在两个 div 中，类为 'col-md-6'

标签： css less

【解决方案1】：

HTML

<div class="panel-footer">
  <div class="row">
    <div class="col-xs-2">
      <div class="row custom-row">
        <div class="col-md-6">
          <button class="btn btn-info btn-block">Cart</button>
        </div>
        <div class="col-md-6">
          <button class="btn btn-success btn-block">Checkout</button>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.custom-row {
  margin-left: -5px;
  margin-right: -5px;
}
.custom-row .col-md-6 {
  padding-left: 5px;
  padding-right: 5px;
}

【讨论】：

您好，感谢您的回复！我实际上有类似的东西，它在 Firefox 上看起来不错，但是当我使用 Chrome 时，它在结帐时切断了字体。不幸的是，它位于一个非常显眼的区域，所以我必须找到更好的工作
你能附上截图吗？
这是一张专辑imgur.com/a/wZRUs。第一张图片是我最初的问题，如果我可以添加一些间距会很好看。第二个是你在小屏幕上的解决方案，看起来也很棒，第三个是你在大屏幕上的解决方案。可以看到结帐文字被截断了
然后你必须自定义引导网格。我已经更新了代码。

【解决方案2】：

对于 div 标签中的第一个按钮

.btn-group {
float: left;
width: 45%;
}

对于您的其他按钮（在其他按钮 div 标签类中添加“2”）：

.btn-group2 {
float: right;
width: 45%;
}

如果你想更好地定位它们，你可以为相同的类添加边距

【讨论】：

为什么不使用:first-child 或:last-child？特定元素的样式相当粗糙，使用编号的类更加粗糙。