html - Bootstrap 3 网格自定义类

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>