何时使用 <b-container>？

Question

根据文档，使用 a<b-container>是布局系统的关键：

Containers( <b-container>)是Bootstrap中最基本的布局元素，在使用网格系统时是必需的。

但我不太明白它们应该用在哪里。

• 作为包含整个页面的一种方式？
• 作为容器<b-row>？
• 作为任何元素的容器？

我想要找出的是<b-container>除了元素之外我什么时候应该使用。我相当确定我不应该（或不必）使用它来打包按钮。但也许当有两个按钮彼此相邻时呢？（这只是一个例子 - 我对一般情况感兴趣）

对于何时使用有明确的规则吗<b-container>？

Answer 1

这个问题有趣的方面是出现在大于布局中引导程序的标准断点的屏幕上，这些屏幕应显示内容宽度有限但背景在整个浏览器宽度中。当然，这也适用于具有视差效果的背景。
Bootstrap 中的常见容器将大小限制为定义的宽度，因此不适合全角背景，它们需要一个可以应用所需全角背景的外部容器。唯一始终具有 100% 宽度的 Bootstrap 容器类型具有“container-fluid”类。为了快速概述容器定义，我将它们添加到以下屏幕截图中：

即使将引导容器包装在外部容器中也可能不需要引导类，它可以像这样使用，第一个示例也可以用于斑马风格的背景：

<div class="container-fluid my-background-1">
    <!-- Limit the width for the content-cols: -->
    <div class="container">
        <div class="row"> ... </div>
        <div class="row"> ... </div>
    </div>
</div>
<div class="container-fluid my-background-2">
    <!-- Limit the width for the content-cols: -->
    <div class="container">
        <div class="row"> ... </div>
        <div class="row"> ... </div>
    </div>
</div>

可能需要具有图像背景，例如视差效果，然后容器不包含内容而仅包含背景：

<div class="container-fluid my-background-1">
    <!-- Full width background -->
</div>
<div class="container">
    <!-- Limit the width for the content-cols: -->
    <div class="container">
        <div class="row"> ... </div>
        <div class="row"> ... </div>
    </div>
</div>

下面我添加了一个较大宽度的图像，但具有 1200px 宽度的有限区域来显示问题（关于绘制的网格，我从未考虑过容器类的填充，因此它可能不是 100% 准确）：

因此，设计师面临的重要问题归结为：

• 应使用什么容器（用于内容网格或专门用于背景）？
• 内容网格是否应限制为常见的引导断点（最大 1200 像素），或者内容网格是否应超出任何可想象的宽度并仅填充浏览器中的可用区域？
• 应应用哪种背景（图像或斑马样式）以及是否应将其应用于当前容器？
• 如果使用斑马样式背景，它是否仅应用于容器宽度还是浏览器窗口的整个宽度？
• 图像（如视差效果）是否只能添加为背景，或者最好直接引用，以启用更容易访问的功能，如 alt 和标题属性（上面我只是假设图像始终作为背景，所以你必须重新考虑我的话，也许可以替换两个选项中的那个选项）？

如果还有什么不清楚的地方，我很乐意编辑我的问题，只需留下进一步的问题/不清楚的细节作为评论让我知道。

编辑 1： 对于像按钮这样的微布局，您最好使用Flex 实用程序来定义清晰且独特的包装行为。