Question

我正在使用bootstrap的类

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

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

请参阅此codepen http://codepen.io/crhistian/pen/WwyWYM?editors=0100

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

Answer 2

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

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

并为您的其他按钮（添加＆＃34; 2＆＃34;到其他按钮div标签类）：

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

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

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

2 个答案: