引導網格：出乎意料的結果與div的佈局

我有以下代碼：引導網格：出乎意料的結果與div的佈局

<div class="row"> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
</div>

我期望的3個div的1行和第二行與2周的div。

結果是： enter image description here

什麼會導致這樣的事情發生？

來源

2015-02-05 Ben Diamant

試圖使用在自舉這樣定義的另一個類：

<div class="row"> 
    <div class="col-xs-12 col-sm-12"> 
     <div class="box"> 
      <div class="box-content"> 
       <div class="col-sm-4">*some content*</div> 
       <div class="col-sm-4">*some content*</div> 
       <div class="col-sm-4">*some content*</div> 
       <div class="col-sm-4">*some content*</div> 
       <div class="col-sm-4">*some content*</div> 
      </div> 
     </div> 
    </div> 
</div>

這應該幫助您<div>標籤的格式位置。在你使用這些類之前，重要的是確定你需要多少個col-sm-*。
您也可以在<div>中使用class="col-sm-offset-4"以「跳過」某些定義的列，並在瀏覽器中更正確地調整第二行。

希望它可以幫助你。

來源

2015-02-05 17:48:06 bcesars

嘿，那裏，謝謝你的回答。一切都是col-sm- *數量未知的事實的很大一部分，可以是3或15。你認爲你的解決方案仍然適合？ – 2015-02-07 08:32:11

如何使用默認方式排結構：

<div class="row"> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
    <div class="col-sm-4">*some content*</div> 
</div> 
<div class="row"> 
    <div class="col-sm-6">*some content*</div> 
    <div class="col-sm-6">*some content*</div> 
</div>

在standard bootstrap grid你也要設置一個外部container包裹的一切行動，檢查出的文檔！

來源

2015-02-05 21:31:54 maioman

是的，但問題是我不知道有多少col-sm- *我有 – 2015-02-07 08:35:58

看flexbox，它可能更適合你必須做的 – maioman 2015-02-07 22:01:22

引導網格：出乎意料的結果與div的佈局

回答

相關問題