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