Warum wird mein Bootstrap-Klassenstil nicht wirksam?
P粉541565322
P粉541565322 2023-09-14 09:06:35
0
1
590

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.

P粉541565322
P粉541565322

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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!