Bootstrap 自定義樣式優先級問題完美解決方案

問題場景

在使用 Bootstrap 框架時，自定義 CSS 樣式無法覆蓋框架默認樣式，無論在引用順序前後都無效。典型案例：

<div class="form-group form-inline col-md-10 col-md-offset-1">
    <label class="control-label">聯系方式</label>
    <input class="input_of_sign form-control" style="margin-left: 2em; width: 70%;">
</div>

需求：通過外部 CSS 設置 width: 100% 讓輸入框配合柵格系統，但行內 style 有效而外部 CSS 無效。

根本原因

Bootstrap 的 .form-control 類具有高優先級選擇器，且可能包含 !important 聲明。CSS 優先級計算規則：

• 內聯樣式 > ID 選擇器 > 類/屬性/偽類 > 元素/偽元素
• 同級別下後聲明者勝出
• !important 打破常規優先級

解決方案

方案一：提高選擇器優先級（推薦）

.form-group .input_of_sign.form-control {
    width: 100% !important;  /* 強制覆蓋 */
}

方案二：使用更具體的選擇器路徑

body .form-inline .form-control.input_of_sign {
    width: 100%;
}

方案三：避免使用 !important 的最佳實踐

1. 在 Bootstrap 之後引入自定義 CSS
2. 使用語義化類名而非覆蓋框架類
3. 利用 CSS 變量自定義主題

調試技巧

使用瀏覽器開發者工具 (F12) → Elements → Styles 面板，查看被劃線的樣式即為被覆蓋的樣式，可直觀分析優先級衝突。