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

问题描述

使用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;
}

解决方法

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

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

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

您可以使用关键字

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文件。

bootstrap-4 html