如何在 Bootstrap 網格系統中實現 1 列 5 欄？

列，是橫的；行，是直的。

Bootstrap 4.5 中預設的網格系統一列能分成 12 欄，且能使用 .col-1~12 類別來自由的切分你要的大小。你可以開心的在一列中切出 1、2、3、4、6 欄，但如果想要切出平均的 5 的話就必須自己改寫 CSS 了。

雖然在網頁設計中應該比較不常會遇到這個狀況，但既然在接網頁設計案子的過程中被我遇到，那就索性來紀錄一下這個簡單的解法。

解決流程

一、打開你的 CSS 檔案或在網頁中加入 <style> 標籤，並寫入這個 .col-2_5 樣式。

.col-2_5 {
    flex: 0 0 20%;
    max-width: 20%;
}

平常要修改 Bootstrap 預設的樣式時，可以直接寫一個新的樣式或從 F12 開發者工具中複製舊有的規則來用。那這次自己寫的 .col-2_5 因為跟 .col 系列是相似的東西，所以可以直接複製 .col-1~12 任一個類別的規則來用，最後自己把中間的 % 數改成 20 就行了。(寬度 100% ÷ 5 = 20%)

二、最後將這個 Class 寫入 HTML 元素中就可以完成一列五欄的需求了！

<div class="row">
    <div class="col-2_5"></div>
    <div class="col-2_5"></div>
    <div class="col-2_5"></div>
    <div class="col-2_5"></div>
    <div class="col-2_5"></div>
</div>