Warum wird mein Bootstrap-Klassenstil nicht wirksam?

Question

Ich bin also neu in HTML, CSS und Bootstrap und kann den Wert meines Stylesheets in der Vorschau nicht aktualisieren. Hier ist meine Schaltflächenbezeichnung und ihr Wert:

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

Aber wenn ich versuche, den Stil des btn-xl-Werts in meinem CSS zu ändern,

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

Alle von mir vorgenommenen Änderungen werden nicht in der Vorschau angezeigt. Bitte sagt mir jemand, wo ich falsch liege?

Also habe ich versucht, meine Links zu überprüfen. Vielleicht liegt ein Fehler im Link-Header vor, der mein HTML und CSS verbindet, aber da ist nichts falsch. Ich habe nach Tippfehlern gesucht, die zu Konflikten führen könnten, aber das ist definitiv kein Tippfehler, also bin ich völlig verloren.

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使用的变量来调整内边距。