时间戳

首页 > 解决方案 > 引导容器的使用

css - 引导容器的使用

问题描述

我有一个关于在 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>

标签： cssbootstrap-4containers

解决方案

选项#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。

推荐阅读