Bootstrap - 我不能將十二列內的五個兩列放在十二列內

Question

我不能將十二列內的五列放在十列內。 http://jsfiddle.net/p8znkgv2/。我曾嘗試下面的「解決方案」，沒有任何的運氣：

<div class="container"> 
<div class="row"> 
<div class="col-sm-12"> 
    <div class="col-sm-1"> </div> 
    <div class="col-sm-10 col-centered"> 
     <div class="col-sm-2">Coontent</div> 
     <div class="col-sm-2">Coontent</div> 
     <div class="col-sm-2">Coontent</div> 
     <div class="col-sm-2">Coontent</div> 
     <div class="col-sm-2">Coontent</div> 
    </div> 
    </div> 
    <div class="col-sm-1"> </div> 
</div> 

.col-centered{ margin: auto; float: none; } 

• 使容器中的表和每列一個表格單元格的項目（失敗）
• 使容器（ 10列）不帶任何自動邊距。 （失敗的大屏幕顯示器）

所以，我怎麼能中心十柱內每兩個柱與十二列的正中央十列？

Answer 1

所以，我怎麼能中心十柱內每兩個柱與十二列的正中央十列？

通過使用.col-sm-offset-*類。例子可以在這裏找到。 http://getbootstrap.com/css/#grid-offsetting。這也是一個小提琴。 http://jsfiddle.net/yongchuc/m12cysv1/

Answer 2

是這樣的嗎？ http://jsfiddle.net/p8znkgv2/2/

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <div class="col-sm-10 col-sm-offset-1"> 
      <div class="col-sm-2 col-sm-offset-1">Coontent</div> 
      <div class="col-sm-2">Coontent</div> 
      <div class="col-sm-2">Coontent</div> 
      <div class="col-sm-2">Coontent</div> 
      <div class="col-sm-2">Coontent</div> 
     </div> 
     </div> 
     <div class="col-sm-1"> </div> 
    </div> 
</div> 

Answer 3

很多與您的結構有關的問題。

一個是你創建子網div與這些網格類的元素，例如， col-sm-*沒有添加和元素第一類.row類。

的Html應該是：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <div class="row"> 
       <div class="col-sm-1"> </div> 
       <div class="col-sm-10 col-centered"> 
        <div class="row"> 
         <div class="col-sm-2">Coontent</div> 
         <div class="col-sm-2">Coontent</div> 
         <div class="col-sm-2">Coontent</div> 
         <div class="col-sm-2">Coontent</div> 
         <div class="col-sm-2">Coontent</div> 
        </div>  
       </div> 
       <div class="col-sm-1"> </div> 
      </div> 
     </div> 
    </div>  
</div> 

和關於居中的5個COLS，因爲有5個COLS沒有具體的類，因爲它是一個12網格系統，添加自定義風格的元素。

例如

.col-centered .row .col-sm-2 { 
    width: 20%; 
} 

Fiddle