Question

我有来自bootstrap.min的这个css：

.rew {
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  width: 1050px;
}

.rew2 {
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  width: auto;
}

我的div喜欢这个（我在stackoverflow中提出了问题和答案的红色例子）：

<div class="rew rew2">
content.....
</div>

（ rew2 ）它是响应式css，但在此之前，我在响应式 css文件中编写了css，但它不能正常工作“ div标记“始终从 bootstrap.min css文件中调用css。所以我在 bootstrap.min css文件中写了两个类，但是也没有用。 “ div ”标记仅称为“重新”类，而“重写”则被忽略。

********响应式css文件的类被删除了，我在bootstrapmin css文件上写了这个类

仅在宽度上的差异，如果从桌面打开的网站将具有 1050px 宽度，并且对于响应（从智能手机打开），它将自动调整智能手机屏幕上的模板为“ auto ”。

* Huft ......我很困惑，为什么它不起作用。我需要你们的帮助。

谢谢，

致以最诚挚的问候，

克里斯

Answer 1

为什么要自己定制bootstraps .css文件？只需创建自己的规则并将其附加到div。

CSS样式总是一个接一个地使用。因此，如果您在自己的样式规则之前包含bootstrap.min.css文件，那么您自己的文件将覆盖所有引导样式。

换句话说：首先包括bootstrap.min.css，然后是您自己的.css文件。

假设你有这个标记

<div class="foo bar"> </div>

您可以通过2个类foo和bar设置样式。

.foo {
  color: red;
}

.bar {
  color: blue;
}

根据声明的顺序，使用它会以蓝色结束。

让我们试着更具体一点。您还可以使用一些更复杂的选择器来覆盖规则。

.foo.bar {
  color: black;
}

上面的代码会覆盖之前定义的两个规则，因为它们是“更强”选择器，而不是简单的单类选择器。

<强>结论如果要覆盖bootstraps样式，请尝试坚持订单。如果bootstrap使用了一些复杂的选择器而你的自定义选择器不会触发，请尝试使用更复杂的选择器。查看here以了解有关复杂选择器的更多信息。

最后有点暗示：尽量避免 !important ！声明为!important的规则将覆盖所有其他规则，无论您之前声明的是什么。

Answer 2

不要自定义bootstrap.min.css创建自己的css文件，因为你可以根据需要编写自己的css。根据你的要求，包括智能手机的媒体查询，宽度：100％;对于那个元素。

一个div上的两个CSS类不起作用

2 个答案: