Bootstrap 網格系統中的「col-md-4」、「col-xs-1」和「col-lg-2」是什麼意思？

了解Bootstrap 中的網格系統：解碼「col-md-4」、「col-xs-1」和「col-lg-2」

Bootstrap 的網格系統為結構化佈局提供了靈活且響應靈敏的解決方案。使用三個關鍵類別前綴：“col-xs”、“col-sm”和“col-lg”，後面跟著一個數字。這些數字定義了列在網格內的對齊方式。

數字如何對齊網格

前綴後面的數字表示給定元素將佔用的列數12 個可用列。每行總共有 12 列，因此「col--6」將佔據一半的可用空間，而「col--12」將跨越整個寬度。

如何使用數字

使用這些類別時，您需要根據預期的螢幕尺寸指定前綴。 「xs」適用於超小螢幕（手機），「sm」適用於小螢幕（平板電腦），「md」適用於中螢幕（部分桌上型電腦），「lg」適用於大螢幕（其餘桌上型電腦）。

例如，要在一行中建立兩個相等的列，您可以使用：

<div>

數字是什麼代表

類別中的數字代表網格內的特定寬度。每列代表行內總可用空間的一部分：

• “col-*-1”：寬度的1/12
• “col-*-2” : 寬度的2/ 12
• "col-*-3": 寬度的3/12 width
• ...
• "col-*-12": 寬度的12/12

透過組合這些類，您可以建立自訂佈局來適應不同的螢幕尺寸和解析度。請記住使用多個列類別來指定不同斷點處的不同行為。這就是 Bootstrap 具有響應能力並允許您創建靈活的自適應佈局的原因。

以上是Bootstrap 網格系統中的「col-md-4」、「col-xs-1」和「col-lg-2」是什麼意思？的詳細內容。更多資訊請關注PHP中文網其他相關文章！