Bootstrap 列元素水平间距

Question

我有一些按钮应该根据屏幕大小改变它们在容器中的布局。 Bootstrap 网格系统做得很好，但我希望这些按钮或列之间有一些间距。 按钮应该跨越容器的整个宽度。 按钮可以变短变宽，但保持高度。 我试过了：

• 添加按钮边距（或包装在 btn-toolbar 类中）。这会增加一个边距，从而扩大按钮及其列，结果最后一个按钮被推到下一行
• 按照其他主题中的建议添加一些填充 - 不起作用。
• 使用了 col-offset 类，但它基本上插入了一整列的空间，但空间太宽（我希望有大约 5px 的水平间距）

如何在不影响其宽度的情况下在列内获得一些边距？

button {
  //margin: 5px; //adds a margin, but pushes the third button off to the next row
  //padding: 5px; //as suggested somewhere. Won't work..
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <button type="button" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    Button A
  </button>
  <button type="button" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    Button B
  </button>
  <button type="button" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    Button C
  </button>
</div>

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 <button type="button" class="btn-block ">
    Button A
  </button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 <button type="button" class="btn-block">
    Button B
  </button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 <button type="button" class="btn-block">
    Button C
  </button>
</div>
 
 
</div>

Answer 2

将您的按钮包装在自己的 div 中

<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
  <button type="button">
    Button A
  </button>
 </div> 
 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
  <button type="button">
    Button B
  </button>
   </div> 
   <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
  <button type="button">
    Button C
  </button>
  </div>
</div>

现在这将为您提供引导类 col-xs-4 等的填充

您可以按大小应用不同的排水沟宽度，但可以为这些类添加填充，例如

[class^="col-xs"]{
  padding: 10px;
} 

只会在视口为 xs 时为您提供 10 像素的填充

终于让你的按钮 100% 宽

button{
  width: 100%;
}