我不明白twitter bootstrap範圍和行

Question

我是一個巨大的960網格系統的用戶，我想我會嘗試Twitter Bootstrap，但也許這是一個愚蠢的問題，你可以笑和投我的票，但事實是我不明白跨度和行。

所以我的問題是，當我創建一個容器，並建立跨在它的內部，它不相鄰符合正確：

像960gs如果我寫了下面的

<div class="container_12"> 
    <div class="grid_4"></div> 
    <div class="grid_4"></div> 
    <div class="grid_4"></div> 
</div> 

我得到一個完美的3列彼此相鄰。

但是我無法通過Twitter Bootstrap實現這一點，不管我做什麼，我總是以不成比例的列結束，所以列不像它應該填充容器，就像使用960gs一樣。如果我放置3列，那麼右邊的邊距不正確，或者它不能正確放入容器中。

自舉例如：

<div class="container"> 
    <div class="row"> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
     <div class="span4"> 
      <h2>Column one</h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
     </div> 
    </div> 
</div> 

因此，在上面的例子中，我結束了不成比例的列，有在第一列到左沒有富餘。如果我在960gs的網格類中這樣做，它是完美的。

與引起我的問​​題的960gs相比，Twitter Bootstrap有什麼不同？

Answer 1

原因是：

• 容器是940px
• 行960像素是具有-20px餘量
• span4 300像素具有20像素的餘量

當屏幕寬度爲< = 940px，行的-20px和span4的20px邊距互相抵消，這就是爲什麼第一個span4沒有左邊距。

在 'Twitter的引導' 的解決方案：

添加自舉responsive.css當屏幕變成下980px及以後768px：

容器成爲724px，744px行和span4 228px，保持第一個跨度上的左邊距。