Bootstrap 中的網格系統：理解「col-md-4」、「col-xs-1」和「col-lg-2」
Bootstrap 網格系統可讓您控制各種螢幕尺寸下元素的佈局和對齊方式。 「col-」類別與數字一起在該系統中發揮著至關重要的作用。
數字如何對齊網格
「col-* 中的數字" 類別表示列的寬度相對於容器的總寬度。每個容器總共可容納 12 列。因此，「col-md-6」將佔用 12 列中的 6 列，從而產生一個容器寬度一半的列。
使用數字
要使用這些數字，只需在數字後麵包含適當的「col-」類別即可。例如，類別為「col-xs-3」的 div 在超小螢幕（即手機）上將佔用 3 列，而類別為「col-sm-6」的 div 在小螢幕上將佔用 6 列。螢幕（即平板電腦）。
它們代表什麼
「col-*」中的數字代表Bootstrap 中定義的回應斷點。字母 xs、sm、md 和 lg對應：
透過在一個元素上使用多個「col-」類，您可以指定它在不同螢幕尺寸下的行為方式。例如，以下程式碼將建立一個列，該列在手機上佔據寬度的一半，但在平板電腦上僅佔據寬度的三分之一：
<div>
了解「col-*」類可以讓您在Bootstrap 中建立靈活且響應式的佈局。透過控制列的數量和大小，您可以在各種裝置上實現最佳的使用者體驗。
以上是「col-md-4」、「col-xs-1」和「col-lg-2」在 Bootstrap 網格系統中如何運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
