理解Bootstrap 網格類別中的數字：col-md-4、col-xs-1、col-lg-2

The Bootstrap 框架引入了強大的網格系統，有助於創建響應式佈局。此系統的組成部分是具有 col-* 格式的類，其中星號代表數字。這些數字在確定網格內的元素如何對齊以及它們如何響應不同的螢幕尺寸方面發揮著至關重要的作用。

數字如何對齊網格？

col-* 類別中的數字表示關聯元素應佔據的可用寬度部分。網格行的總寬度分為12列，類別中的數字表示該元素將跨越的列數。

例如col-4表示該元素將跨越4列，或可用寬度的 1/3。 col-12 將跨越整個寬度，佔據所有 12 列。

如何使用數字

要使用這些類，只需將它們分配給 a 中的元素即可網格行。例如，要在一行中建立兩個等寬的列，您可以使用：

Column 1
Column 2

要建立三個不等寬的列，您可以使用：

Column 1
Column 2
Column 3

數字代表什麼？

除了數字本身之外，重要的是要注意應用於它們的前綴。在Bootstrap 中，這些前綴代表不同的螢幕尺寸：

• xs：超小（行動裝置）
• sm：小（平板電腦）
• md：中（桌上型電腦） )
• lg: Large（較大的桌面）

透過分配多個col-* 類別對於一個元素，您可以控制它在每種螢幕尺寸下的行為方式。例如，col-6 col-sm-4 表示該元素將在行動裝置螢幕上跨越寬度的一半，在平板電腦和桌上型電腦上跨越寬度的 1/3。

結論

了解 Bootstrap 網格類別中的數字和前綴對於創建響應式和自適應 Web 佈局至關重要。透過有效地利用 col-* 類，開發人員可以確保他們的設計無縫響應不同的螢幕尺寸，從而在所有裝置上提供一致的使用者體驗。