瞭解bootstrap網格系統類

Question

我是新用戶bootstrap 3，我對使用網格系統有一些誤解。

我看到一些網站只使用col-sm類等使用col-lg等二手col-lg和col-md和col-sm。

我可以使用col-xs-#或col-md-#或任何類別的所有設備，併爲所有設備上升或我必須使用所有類別？

我如何決定我應該使用哪些類？幫助我與一些網站使用引導3不同的設備。最後一件事，當我可以使用container-fluid或container。

Answer 1

我不認爲你首先了解Bootstrap3的想法。

他們說：Bootstrap是「Mobile First」，這意味着，較小的屏幕設備的類具有較高的優先級，所以如果存在，它們將用於首先顯示。如果當前屏幕尺寸沒有定義，或者對於較小的屏幕沒有定義，則col將相互堆疊，換句話說，它們全部變成col-xs-12。

讓使之具體化：

- 你有你的<div class="row"></div>幾個欄裏面：

<div class="container"> 
    <div class="row" style="color: white;"> 
     <div class="row" style="color: white;"> 
     <div class="col-md-6 col-sm-9" style="background: red;">.col-md-6 .col-sm-9</div> 
     <div class="col-md-6 col-sm-3" style="background: green;">.col-md-6 .col-sm-3</div> 
    </div> 
</div> 

要理解這一點，假設我們有開放的網站包含上面的代碼中4個不同的設備：

• 電話（超小設備）：屏幕寬度爲< 768px的設備。這些與類.col-xs-#。 Bootstrap將查找是否存在等於或小於當前屏幕大小的屏幕大小的定義。這裏我們沒有它，只是.col-sm-#和.col-md-#，它們屬於更大的屏幕尺寸，並沒有相同或更小屏幕尺寸的類別。在這種情況下，Bootstrap將處理默認行爲，以確保無論如何，這將很好地顯示;所以它使所有的div彼此堆疊在一起，換句話說，它使它們全部變成.col-xs-12。像這樣：

• 平板電腦（小型設備）：屏幕尺寸> = 768px和< 992px的設備。這些與類.col-sm-#。現在Bootstrap發現存在.col-md-6的定義。它只是將其顯示爲它的定義爲：

• 桌面（中等器件）：此類設備的屏幕尺寸> = 992px和< 1200像素。這些與類.col-md-#。這種情況與前面的情況相同，其中Bootstrap找到.col-md-#並按原樣顯示：

• 桌面（大型設備）：屏幕尺寸> = 1200px的設備。這些與類.col-lg-#。這種情況下，Bootstrap現在發現類似.col-lg-#。現在，它爬下樓梯到較小的屏幕尺寸設備，以獲得較小設備的定義。在這種情況下，.col-md-#是最接近.col-lg-#的那個，所以它會到位。因此，我們得到了相同的結果一樣的媒體裝置的情況下：

畢竟，我們應該記住，較小的屏幕尺寸類將具有更高的優先級。你不必爲一個div定義所有的類，但只有一些你認爲它們是重要的，適合你的顯示目的。

對於你的問題，答案是YES。您只能爲您的網站定義.col-lg-#。但是，當用戶在手機或平板電腦或小型桌面上查看時，所有元素都會堆疊在一起。

Answer 2

幾乎你設置了最高的變化，所以如果我需要一個手機上的col-xs-12，但最大的不利用就是說在sm-> lg上的col-8使用col-sm-8。

您在這裏使用媒體查詢，因此它們被寫爲最小寬度：xxpx，因此超過該最小寬度的任何內容都應該應用此規則。