什麼情況下用bootstrap柵格系統

當你使用bootstrap建立網頁時，希望網頁能適配不同解析度的設備，那麼就需要使用柵格系統。 （推薦學習：Bootstrap影片教學）

#柵格系統就是可以將一組區塊級元素水平排列並可以隨著螢幕解析度的不同來改變區塊級元素的樣式。

柵格系統用於透過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就可以放入這些建立好的佈局中。

下面就介紹一下Bootstrap 柵格系統的工作原理：

「行（row）」必須包含在.container （固定寬度）或.container-fluid （100% 寬度）中，以便為其賦予適當的排列（aligment）和內補（padding）。

透過「行（row）」在水平方向建立一組「列（column）」。

你的內容應放置於「列（column）」內，並且，只有「列（column）」可以作為行（row）」的直接子元素。

類似.row和.col-xs-4 這種預先定義的類，可以用來快速建立柵格佈局。Bootstrap 原始碼中定義的mixin 也可以用來創建語義化的佈局。

透過為「列（ column）”設定padding 屬性，從而創建列與列之間的間隔（gutter）。透過為.row 元素設定負值margin 從而抵消掉為.container 元素設定的padding，也間接為“行（row）”所包含的「列（column）」抵消掉了padding。

負值的margin就是下面的範例為什麼是向外突出的原因。在柵格列中的內容排成一行。

柵格系統中的欄位是透過指定1到12的值來表示其跨越的範圍。例如，三個等寬的欄位可以使用三個.col-xs-4 來建立。

如果一「行（row）」中包含了的「列（column）」大於12，多餘的「列（column）」所在的元素將被當作一個整體另起一行排列。

柵格類適用於與螢幕寬度大於或等於分界點大小的設備， 並且針對小螢幕設備覆蓋柵格類別。 因此，在元素上套用任何.col-md-* 柵格類別適用於與螢幕寬度大於或等於分界點大小的設備， 並且針對小螢幕設備覆蓋柵格類別。 因此，在元素上應用任何.col-lg-* 不存在，也影響大螢幕設備。

更多Bootstrap相關技術文章，請訪問Bootstrap教程欄位進行學習！

以上是什麼情況下用bootstrap柵格系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！