引導電網XS變爲18列不是12列

<div class="row"> 
<div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div> 
<div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>

引導電網XS變爲18列不是12列

我在引導電網閱讀，網格應等於完全的12列。但在自舉網站本身的網格示例中，他們已經提到了上述代碼.. col-xs-12和col xs-6等於變成了18但不是12.請澄清這種混淆。

來源

2015-05-29 jai_kenche

你問題中的標記是「正確的」，但可能不能解釋爲什麼。基本上，如果您選擇使用多於12列，則在初始12之後的任何額外列將包裝到下一行。例如：

<div class="row"> 
    <div class="col-xs-12">...</div> 
    <div class="col-xs-6">...</div> 
</div>

會產生類似的結果如下：

<div class="row"> 
    <div class="col-xs-12">...</div> 
</div> 
<div class="row"> 
    <div class="col-xs-6">...</div> 
</div>

這兩種方法都是允許的，但你必須在你的頁面的外觀和風格更多的控制使用row, columns, row, columns方法時在第二個例子中。

更多這裏：Bootstrap Column Wrapping

如果超過12列被放置在單個行中，每一組額外的列的將作爲一個單元，換到新的一行。

<div class="row"> 
    <div class="col-xs-9">.col-xs-9</div> 
    <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> 
    <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> 
</div>

來源

2015-05-29 18:08:11

感謝兄弟，這是我正在尋找的答案。非常感謝 –

-3

你可以不等於默認使用col-xs監守12列使用下面

<div class="container"> 
<div class="row"> 
<div class="col-lg-8 col-sm-6 col-xs-12">.col-lg-8 .col-sm-6 .col-xs-12</div> 
<div class="col-lg-4 col-sm-6 col-xs-12">.col-lg-4 .col-sm-6 .col-xs-12</div> 
</div> 
</div>

這段代碼是正確的，不包含任何錯誤

可能是你不」這個代碼t使用了container類

當你使用一個row這意味着你可以在12列你使用一行必須是每列的集合s不超過12列例如clo-lg-8 + col-lg-4 = col-lg-12這是真的但如果收集的列少於12列沒有問題。但不應超過12欄。

在你的榜樣

col-xs-12 + col-xs-6 = col-xs-18，這是錯誤的，因爲你用一個row如果第一個div推杆所有列，你可以把另一個colimn該行中，你必須降低col-xs-12，直到可以在第二個div到添加列行。

來源

2015-05-29 18:01:59

這有點難以理解。 – mezmi

這並沒有提供對這個問題的回答......其中一個問題是關於**爲什麼**這個例子有18列。其次，你的「解決方案」中仍然有'col-xs-12'，接着是'col-xs-6'。 –

Bootstrap只允許共有12列。

爲什麼這個例子本身顯示18也不能迴避我，但需要考慮的是如果超過12列被定義，下一組列被推到下一行。這通常很容易用lg或sm或md顯示。

對於xs列，寬度是完全自動的。這可能意味着你可以在一行中定義18，並且它們都是自動寬度。我說你最好的選擇是玩xs，看看爲什麼bootstrap提供它作爲一個例子18.

我將重點放在寬度（自動）和其他列類型的定義，作爲與xs的比較。這是關鍵。

來源

2015-05-29 18:04:52 OscillatingMonkey

你的閱讀引導電網，但你沒看過引導電網CSS。 Bootstrap網格不可能等於18列。在Bootstrap網格CSS下面。

.col-xs-12, .col-sm-12, .col-md-12, col-lg-12{ 
    width: 100%; 
    float: left: 
    position: relative; 
    padding-left: 15px; 
    padding-right: 15px; 
    min-height: 1px; 
} 
.col-xs-6, .col-sm-6, .col-md-6, col-lg-6{ 
    width: 50%; 
    float: left: 
    position: relative; 
    padding-left: 15px; 
    padding-right: 15px; 
    min-height: 1px; 
} 
.col-xs-1, .col-sm-1, .col-md-1, col-lg-1{ 
    width: 8.3333%; 
    float: left: 
    position: relative; 
    padding-left: 15px; 
    padding-right: 15px; 
    min-height: 1px; 
}

三個不同@meida查詢CSS寬度是相同的（100/12）。

來源

2015-05-29 18:10:41 Rahul

引導電網XS變爲18列不是12列

回答

相關問題