如何在引导样式旁边添加 CSS 样式答案

【问题标题】：How to add css style beside the bootstrap styles如何在引导样式旁边添加 CSS 样式
【发布时间】：2022-01-07 18:35:04
【问题描述】：

我是css和html的新手我在 HTML 中的元素中添加了一些引导样式如您所知，当您将引导样式添加到元素时，该类将被采用。所以我不能在其中添加我自己的 CSS 样式。有没有什么办法解决这一问题？？将 ID 添加到元素是唯一的方法吗？非常感谢。

【问题讨论】：

我不确定您要做什么，但是如果您需要向已在引导程序中处理的类添加样式，您可以使用 !important: #idtag{ color: red ！重要的; }
无论您使用的是引导程序还是任何其他框架，您都可以使用任何 css 支持的选择器
class 属性可以包含多个以空格分隔的类。在任何引导类旁边添加您自己的自定义类。
随着应用程序的增长，使用 !important 覆盖很难管理......但是在引导后加载的单独 css 文件中复制引导选择器是一个很好的过程。这篇文章很好地分解了它bootstrapdash.com/bootstrap-css-styles

标签： html css bootstrap-4

【解决方案1】：

一些引导元素有自己的自定义，例如从bg-light 更改为bg-dark。但是，如果您需要更改某些内容，您可以简单地分配一个新类并进行必要的更改
示例：

<button type="button" class="btn btn-primary mystyle">Primary</button>

.mystyle
{
    background-color: white;
}

如果您的样式不适用，只需添加 !important 即可优先于 boostrap：

.mystyle
{
    background-color: white !important;
}

【讨论】：

【解决方案2】：

创建一个新的 CSS 文件并在你的 head 标签中添加你自己的 css 文件！然后在该文件上编写您自己的 CSS。如果某些 css 没有被覆盖，则在最后使用 !important

body {
  background-color: #000 !important;
}

    <!--Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />

    <!-- Your CSS file -->
    <link rel="stylesheet" href="your-file-css.css" />

【讨论】：

【解决方案3】：

首先，如果您想覆盖默认引导程序，您可以通过覆盖引导程序文档https://getbootstrap.com/docs/4.0/getting-started/theming/ 中提到的默认行为来做到这一点，为此您也需要将 sass 安装在您的项目文件夹中，如果您是使用简单的 CDN 来使用引导程序，然后只需将 !important 标记添加到您的 css 即

    .btn-primary {
          background-color: red !important;
       }

确保首先出现 Bootstrap CDN，然后是您的自定义 css 文件。

【讨论】：

【解决方案4】：

您可以使用!important 规则为您描述的属性赋予最高优先级。

例子：

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

【讨论】：