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>