Twitter Bootstrap：填充100％网格宽度换行元素

Question

我有一个问题，即使用Twitter Bootstrap网格系统时，网格中包含的元素被包裹在行的末尾，尽管所有包含元素的宽度一起100％。

插图这里： http://www.bootply.com/KEm1U4bDVP

我试图找到边距和补已经也没有找到，构成了额外的空间，从而造成环绕的任何元素。

而不是使用最后一个按钮的“30％”宽度，我可以使用29％的值，但这是违背我的意愿的。因为当屏幕宽度减小时，少量的额外间距变得越来越小。

如何让按钮保持在一行而不被包裹？

Answer 1

按钮是inline-block的元素。你有两个选择：

浮动元素：http://www.bootply.com/drrFPKsDPY

或评论的空间：http://www.bootply.com/RMoQw95WpJ

Answer 2

你必须使用网格系统正确

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="row"> 
      <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div> 
      <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div> 
      <div class="col-lg-4"><button class="btn btn-primary btn-block">1</button></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 3

您可以设置使用calc看到小提琴宽度：https://jsfiddle.net/eye4ytq2/1/

<button class="btn btn-primary" style="width: calc(30% - 5px)">1</button> 
<button class="btn btn-primary" style="width: 40%">2</button> 
<button class="btn btn-primary" style="width: calc(30% - 5px)">3</button>