6. 網格系統

一、使用網格的注意事項

BootStrap4的網格系統以 flexbox（CSS3）為基礎（取代 table、floats…），因此可以做到自動等寬等高的欄位、自動平均欄位、垂直置中等以往很難做的功能。
同時也代表對 IE9（以下）不再支援，至少要用IE10才行。
網格系統必須在容器（.container）中才有作用

二、指定欄寬用法

一般使用範例：

<div class="container">
    <div class="row">
        <div class="col-sm-3">側邊三欄</div>
        <div class="col-sm-9">右邊九欄</div>
    </div>
</div>

.row 代表一個橫列，以確保裡面的欄位可以對齊、排序。
.col-sm 式斷點前綴詞，後面接的是欄位寬度設定，預設滿版為12欄
若超過12欄，則會自動新增一個 .row

三、自動等寬用法

在 BootStrap4 中也可以這樣使用等寬欄位：

<div class="container">
    <div class="row">
        <div class="col">col 等寬 1/5</div>
        <div class="col">col 等寬 2/5</div>
        <div class="col">col 等寬 3/5</div>
        <div class="col">col 等寬 4/5</div>
        <div class="col">col 等寬 5/5</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm 等寬 1/5</div>
        <div class="col-sm">col-sm 等寬 2/5</div>
        <div class="col-sm">col-sm 等寬 3/5</div>
        <div class="col-sm">col-sm 等寬 4/5</div>
        <div class="col-sm">col-sm 等寬 5/5</div>
    </div>
</div>

上方的用法就是不管螢幕多大，都要分成五欄
下方的用法是當螢幕在 576 以上時，才分五欄，在 576 以下的時候，會自動調成單欄式。

小技巧：
輸入 `.row>.col-sm*5` 然後按 `tab` 鍵，可以快速產生以上語法

四、指定欄寬+自動欄寬

可以指定某幾欄的欄寬，其餘的自行自動平均

<div class="container">
    <div class="row">
        <div class="col-sm">自動平均分配</div>
        <div class="col-sm-7">指定佔 7 欄</div>
        <div class="col-sm">自動平均分配</div>
    </div>
</div>

五、根據內容多寡自動調整欄寬

若不確定該站多少欄寬，亦可讓電腦自行根據內容多寡來判斷：

<div class="container">
    <div class="row">
        <div class="col-sm">自動平均分配</div>
        <div class="col-sm-auto">根據中間內容多多寡來判斷欄寬</div>
        <div class="col-sm">自動平均分配</div>
    </div>
</div>

六、不同斷點的欄寬搭配

可以在同一個欄位根據不同斷點給予不同大小

<div class="container">
    <div class="row">
        <div class="col">自動平均分配</div>
        <div class="col-sm-6 col-md-7 col-lg-8">根據不同螢幕大小來指定中間欄位欄寬</div>
        <div class="col">自動平均分配</div>
    </div>
</div>