自举容器的使用

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的“容器”类-这取决于您希望实现哪种布局-

  

容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时是必需的。从有响应的固定宽度容器（表示每个断点处的最大宽度发生变化）或流体宽度（表示其始终保持100％的宽度）中进行选择。[...]

通常，内容将放置在容器内，例如：

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

我想这是选项＃5。

Answer 2

Bootstrap容器的使用主要取决于要创建的布局类型，以及如何将属性应用于主要元素。

在您的示例中：

选项＃1 不使用容器，因此它不会从其主要吸引力居中

中受益。

选项＃2 和选项＃3 相同，因为课程顺序不会对您的标记产生任何影响。

选项＃4 如果仅想使内容居中，而要使其他元素使用完整的可用宽度，则可以使用它，特别是在希望部分具有不同背景色但保持内容在中心，像这样：

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

此外，如果您使用container-fluid，则容器将展开以使用完整的视口宽度，这对于某些布局可能是需要的，并且在屏幕过宽时无法与其他布局特别配合，结束看起来像这样：