為何我的Bootstrap類別樣式未生效
P粉541565322
P粉541565322 2023-09-14 09:06:35
0
1
690

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

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

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

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

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

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

P粉541565322
P粉541565322

全部回覆(1)
P粉293550575

看起來你的問題是由於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使用的變數來調整內邊距。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!