「col-md-4」、「col-xs-1」和「col-lg-2」在 Bootstrap 網格系統中如何運作？

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 對應於：

• xs：超小（手機）
• sm：小（平板電腦）
• md：中（某些桌面）
• lg：大（剩餘桌面）

透過在元素上使用多個「col-」類，您可以指定它在不同螢幕尺寸下的行為方式。例如，以下程式碼將建立一個列，該列在手機上佔據寬度的一半，但在平板電腦上僅佔據寬度的三分之一：

<div>

了解「col-*」類可以讓您在Bootstrap 中建立靈活且響應式的佈局。透過控制列的數量和大小，您可以在各種裝置上實現最佳的使用者體驗。

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