引导容器的使用

Question

我有一个关于在 Bootstrap 下使用容器的最佳方式是什么的问题。我有以下 4 个选项作为示例，我想知道哪种方法是使用容器的更好方法。差异只是风格而不是实质吗？指定类的顺序是否重要？如果是，最好的顺序是本地定义的第一个还是最后一个？

<!-- Latest JQuery; Must be loaded before Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

.section-1
{
    background-color: #2f5571;
    font-size: 20px;
    text-align: center; 
    color: #fdfcfc;
    font-family: 'Lato', sans-serif;
    padding: 20px 20px; 
    margin-top: 20px; 
}

</style>


<div class="section-1">
    <p>Some text 1</p>
</div>


<div class="section-1 container">
    <p>Some text 2</p>
</div>


<div class="container section-1">
    <p>Some text 3</p>
</div>


<div class="section-1">
    <div class="container">
        <p>Some text 4</p>
    </div>
</div>

Answer 1

选项 #1 没有使用容器/网格系统 -- https://getbootstrap.com/docs/4.1/layout/overview/ -- 所以在正确使用 Bootstrap 库（特别是容器）的情况下 -- 这是一个糟糕的选择。

应用 CSS 选择器的顺序不应有任何区别（根据 W3C 规范）：

https://www.w3.org/TR/selectors/#specificity

表示选项 #2 和 #3 在功能上相同。

至于你应该如何使用 Bootstrap 的 'container' 类——这取决于你想要实现什么样的布局——

容器是 Bootstrap 中最基本的布局元素，在使用我们的默认网格系统时是必需的。从响应式、固定宽度的容器中选择（意味着它的最大宽度在每个断点处发生变化）或流体宽度（意味着它一直是 100% 宽）[...]

通常，内容会放在容器内，例如：

<div class="container">
    <!-- Content here. -->
</div>

我想，这将是选项 #5。

Answer 2

Bootstrap 容器的使用主要基于您要创建的布局类型，以及您希望属性如何应用于主要元素。

关于你的例子：

选项 #1 不使用容器，因此它根本不会受益于它的主要吸引力，即以内容为中心

选项 #2 和 选项 #3 是相同的，因为类顺序不应该对您的标记产生任何影响。

选项 #4 如果您只想将内容居中，但使用完整的可用宽度保留其他元素，则可以使用该选项，如果您希望部分具有不同的背景颜色但保留中心的内容，像这样：

您的最后一个选项是在全局 div 或 section 上使用 .container，以便页面上的所有内容保持居中。

另外，如果您使用container-fluid，容器将展开以使用完整的视口宽度，这可能是某些布局所需要的，并且当屏幕太宽时与其他布局不能很好地配合，最终看起来像这样：