Question

我正在使用Bootstrap 3设计一个网站，我想问一下如何将自定义类应用于现有的col-md-12，所以我不会使用id（#cusom-name））？

我应该像

那样写我的CSS

.col-md-12 test {
    background: blue;
    padding-left: 10px;
}

和我的html一样：

<div class="col-md-12 test">div content</div>

或者我应该坚持使用标准col-md-12之类的东西，在里面使用我的自定义类和新的div？像

<div class="col-md-12">
    <div class="test">
        test content
    </div>
</div>

我希望它足够清楚......谢谢！

Answer 1

在HTML中，加载Bootstrap 3样式表文件后加载自定义样式表文件。不要编辑Bootstrap的文件，因为更新将变得困难。

然后，在样式表中，只需将该类定义为正常，就可以了。

.blue-bg {
    background: blue;
    padding-left: 10px;
}

然后，就像你已经在HTML中一样，我们就像这样;

<div class="col-md-12 blue-bg">
    div content
</div>

这样做将应用.col-md-12（由Bootstrap定义）和.blue-bg（由您定义）的所有样式。

我们最后加载您的样式表的原因是冲突。如果你和Bootstrap都定义了一个属性。例如，Bootstrap将背景设置为红色，然后将其设置为蓝色。无论最后的样式表是什么，都将遵守。

通过这种方式，您可以定义另一个类;

.red-bg {
    background: red;
    padding-left: 10px;
}

然后随意使用它们，无论你想要什么。考虑一下。

<div class="row">
    <div class="col-md-6 blue-bg">
        Div with a blue background.
    </div>
    <div class="col-md-3 red-bg">
        Div with a red background.
    </div>
    <div class="col-md-3 blue-bg">
        Another div with a blue background.
    </div>
</div>

Answer 2

只需在你自己的CSS中写出这样的内容：

.test {
  background: blue;
  padding-left: 10px;
}

在html中就像这样：

<div class="col-md-12 test">
     <p>test content</p>
</div>

不要更改bootstraps css，因为稍后更新它会更难，使用你创建的css进行的工作会覆盖bootstra规则。

Answer 3

这真的取决于你的造型。以及您的代码风格。您可以向.col-md-12类添加另一个修改类，或者在该容器中嵌套另一个类。修饰符没有永远或永远的答案。通过修饰符，我的意思是覆盖BS3的默认/核心类。

此外，在您的示例代码中，您忘记了test之前的时段。如果你要将那个类嵌入其中，它应该是这样的：

.col-md-12 .text {}

因为.col-md-12是一个网格组件，我认为将div.test嵌套在该组件中是不合理的，不会混淆该元素的作用或其行为的上下文。如果您将padding添加到应用中的所有.col-md-12，而不是一次性使用填充，则会产生不良影响的示例。要在这种情况下添加填充，您可以在.test内嵌套.col-md-12，并将填充添加到.test（而不是网格元素）。在我看来，你可以很好地分离代码并使用它。此外，您可以在应用的其他位置使用新创建的.test课程。

有很多方法可以组织CSS，并根据目的将元素组合在一起。如果您对某些阅读感兴趣，可以查看以下资源：http://smacss.com/（以及其他内容）。

Answer 4

在CSS中，您可以拥有仅为两个类设置的属性，但是类名之间不应该有空格。它应该是：

.col-md-12.test {
    background: lightblue;
    padding-left: 10px;
}

Answer 5

你不需要添加额外的div，你可以拥有

<div class="col-md-12 test">div content</div>

并定义new以及你也可以覆盖col-md-12的bootstrap css但是如果你直接应用它，它将适用于你曾经使用过这个bootstrap类的地方。所以最好在.test上添加自定义css，例如

.test {
  width: 80%;
  padding: 2%;
}

如果您的自定义css没有覆盖bootstrap，那么你可以使用！important例如。

.test {
      width: 80% !important;
      padding: 2% !important;
    }

使用！important'属性'定义规则会放弃关于覆盖'先前'规则的'后来'规则的正常问题。

Bootstrap 3网格自定义类

5 个答案: