如何在 bootstrap 样式旁边添加 css 样式

Question

我是 css 和 html 的新人我向 HTML 中的元素添加了一些 bootstrap 样式如您所知，当您向元素添加 bootstrap 样式时，将采用 class 。所以我无法向其中添加自己的 css 样式。有没有什么办法解决这一问题？？将 ID 添加到元素是唯一的方法吗？非常感谢。

Answer 1

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

示例：

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

Answer 2

一些 bootstrap 元素有自己的自定义，例如从 bg-light 更改为 bg-dark。但是，如果您需要更改某些内容，您只需分配一个新的 class 并进行必要的更改
示例：

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

.mystyle
{
    background-color: white;
}

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

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

Answer 3

如果你想覆盖默认值 bootstrap 首先，你可以通过覆盖 bootstrap 文档 https://getbootstrap.com/docs/4.0/getting-started/theming/ 中提到的默认行为来实现，为此你需要 sass 也安装在您的项目文件夹中，如果您使用简单的 CDN 来使用 bootstrap，那么只需将 !important 标签添加到您的 css 即

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

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

Answer 4

创建一个新的 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" />

如何在 bootstrap 样式旁边添加 css 样式

How to add css style beside the bootstrap styles

html

css

bootstrap-4