使用 Bootstrap 網格系統為不同裝置構建頁面

網格系統用於透過一系列包含內容的行和列來建立頁面佈局。

以下是 Bootstrap 網格系統的工作原理

• 必須將行放在 .container 類中，以實現正確的對齊和填充。
• 使用行建立列的水平組。
• 內容應放在列中，並且只有列可以是行的直接子代。
• 預定義的網格類（例如 .row 和 .col-xs-4）可用於快速進行網格佈局。也可以使用更少的組合來實現更有意義的佈局。
• 列透過填充建立間隙（列內容之間的空白）。這些填充透過 .rows 上的負邊距在第一列和最後一列上的行中進行偏移。
• 透過指定想要跨越的 12 個可用列的數量來建立網格列。例如，三個相等的列將使用三個 .col-xs-4。

Arjun Thakur

更新於: 12-06-2020

353 個瀏覽量

職業起步

完成課程獲得認證

開始