為何我的Bootstrap類別樣式未生效

Question

所以我是HTML、CSS和bootstrap的新手，我在預覽中無法更新我的樣式表的值，這是我的按鈕標籤和它的值：

<button class="btn btn-primary btn-xl">Find out More</button>

但是當我嘗試在我的CSS中更改btn-xl值的樣式時，

.btn-xl {
    padding: 1rem 2rem;
}

我所做的任何更改都不會在預覽中顯示。請有人告訴我我錯在哪裡？

所以我嘗試檢查我的鏈接，也許在連接我的HTML和CSS的鏈接標題中有錯誤，但是那裡沒有任何錯誤。 我檢查了可能會衝突的任何拼寫錯誤，但這絕對不是拼寫錯誤，所以我完全迷失了。

Answer 1

看起來你的問題是由於Bootstrap覆蓋了值而引起的。可能是你添加樣式表的順序問題，也可能是特異性問題。如果你改變類別名，就會變成：

.btn.btn-xl {
    padding: 1rem 2rem;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.css" rel="stylesheet"/>

<button class="btn btn-primary btn-xl">了解更多</button>

如果你想改變所有按鈕的樣式，你可以更新Bootstrap使用的變數來調整內邊距。