使用 Bootstrap 时如何添加自定义 CSS 样式表

Question

当我使用 Bootstrap 时，我的自定义 CSS 样式表不起作用。 !important标签不起作用（我也听说 !important 不是一个好习惯）并且使用 ID 而不是 Class 不是一个好主意，因为样式将被多次使用。

有没有办法在不使用 ID 的情况下覆盖 Bootstrap？

带有引导程序和自定义 css 链接的 HTML

 <header>
    <nav class="navbar navbar-expand-md navbar-dark navbar-custom">
        <a class="navbar-brand" href="index.html">Jake Yoon</a>
    </nav>
</header>

自定义 CSS

.navbar-custom {
   background-color: lightsteelblue;
   font-size: 25px;
   color: white;
}

Answer 1

这可能不是最好的答案。 但这就是我的管理方式：

<div class="bootstrap-classes eg.navbar">
     <span class="custom-classes">hello world</span>
</div>

在父级中使用引导类。 创建一个孩子并在其上使用您自己的课程。 这对我有用。

Answer 2

你可以使用关键字

important! 

覆盖引导程序类。 下面给出一个例子

 .navbar-custom { background-color: lightsteelblue !important; font-size: 25px !important; color: white !impotant; }

 <header> <nav class="navbar navbar-expand-md navbar-dark navbar-custom"> <a class="navbar-brand" href="index.html">Jake Yoon</a> </nav> </header>

这只是您要更改的 CSS 文件。