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

将你的按钮包装在他们自己的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>

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

您可以按尺寸宽度应用不同的装订线，但可以为这些类添加填充，例如

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

当视口为xs

时，

将为您提供10个像素的填充

最后让你的按钮100％宽

button{
  width: 100%;
}

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;