多个和/或嵌套的Bootstrap容器？ [英] Multiple and/or nested Bootstrap containers?

问题描述

我的理解是所有Bootstrap风格的元素必须存在于< div class =container> 元素内。但有时我看到有多个容器的Bootstrap示例：

My understanding is that all Bootstrap-styled elements must exist inside a <div class="container"> element. But sometimes I see Bootstrap examples where there are multiple "containers":

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

我的问题：

1. 您何时需要具有多个容器div的单个HTML页面？这个提供了什么好处，而不是把整个机体放在一个大的容器div？


2. 你想把容器divs嵌套在其他的？何时/为什么？

推荐答案

1. 该页面将跨越完整的视口宽度，而其他则不会。一些背景将是全宽，但内容不会。

1. Some sections of the page will span the full viewport width and others won't. Some backgrounds will be the full width but the content won't.

一个例子是一个featurette区域，有一个背景图像或颜色是全宽度视口，但内部的内容，窗体或其他，不要超过任何给定视口宽度的 .container 。

An example of this is a featurette area which has a background image or color that is the full width of the viewport but the content inside that, forms or whatever, don't exceed the .container at any given viewport width.

您不嵌套 .container 或 .container-fluid - 请参阅文档。没有必要。

You don't nest .container or .container-fluid -- see the docs. It's not necessary.

文档：Bootstrap需要一个包含元素来包装网站内容
并容纳我们的网格系统。您可以选择两个容器之一，以在项目中使用
。注意，由于填充和更多，
容器都不可嵌套[不意味着.container和.container-fluid不是嵌套的]。

Docs: Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable [neither means that .container and .container-fluid are NOT to be nested].

这篇关于多个和/或嵌套的Bootstrap容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！