如何在 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>
訂閱
Notify of
guest
4 留言
最受好評的
最新的 最舊的
Inline Feedbacks
檢視所有留言
4
0
Would love your thoughts, please comment.x
()
x