blocks|key|2724257|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2724258|页面的某些部分将覆盖整个视口宽度，而其他部分则不会。有些背景将是整个宽度，但内容不会。|ordered-list-item|2724259|2724260|这方面的一个例子是一个特写区域，它的背景图像或颜色是整个视区的宽度，但其中的内容，表单或任何东西，在任何给定的视区宽度上都不超过.container。你不能嵌套.container或.container-fluid+--参见docs。这没必要。|offset|length|style|CODE|2724261|Bootstrap需要一个包含元素来包装站点内容并容纳我们的网格系统。您可以从两个容器中选择一个在项目中使用。请注意，由于填充等原因，两个容器都不是可嵌套的，这也不意味着.container和.container-fluid不能嵌套。|2724262|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/css/#overview-container^0|0|0|0|1S|A|28|A|2J|G|34|4|0|0|0^^$0|@$1|2|3|-4|4|5|6|U|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|V|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|W|7|@]|8|@]|9|$]]|$1|E|3|F|4|5|6|X|7|@$G|Y|H|Z|I|J]|$G|10|H|11|I|J]|$G|12|H|13|I|J]]|8|@$G|14|H|15|1|16]]|9|$]]|$1|K|3|L|4|5|6|17|7|@]|8|@]|9|$]]|$1|M|3|-4|4|5|6|18|7|@]|8|@]|9|$]]]|N|$O|$4|P|Q|R|9|$S|T]]]]

<ol>
<li>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.

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 <code>.container</code> at any given viewport width. </li>
<li>You don't nest <code>.container</code> or <code>.container-fluid</code> -- see the <a href="http://getbootstrap.com/css/#overview-container">docs</a>. It's not necessary.

<blockquote>
 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].
</blockquote></li>
</ol>

blocks|key|148399|text|实际上，这完全取决于设计师的要求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|148400|有时你需要整个行的宽度(我的意思是说视窗或一条可见的部分，你可以在没有单独的容器类的情况下实现)|148401|http://binarytheme.com/demos?theme=bootsrap-landing-page-blue|offset|length|148402|请参阅上面的模板示例以了解|148403|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1P|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@$F|T|G|U|1|V]]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|E]]]]

Actually its totally depends upon the requirement of the designer.

Some times you need full width of the row ( i mean to say viewport or a strip of visible part that you can achieved without separate container class )

<a href="http://binarytheme.com/demos?theme=bootsrap-landing-page-blue" rel="noreferrer">http://binarytheme.com/demos?theme=bootsrap-landing-page-blue</a>

see above template example to understand

blocks|key|2724305|text|与一些人所说的不同，您可以在container中嵌套一个container-fluid。在bootstrap官方网站上甚至有一个例子：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2724306|http://getbootstrap.com/examples/navbar/|2724307|entityMap|0|LINK|mutability|MUTABLE|url^0|E|9|S|F|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@$9|U|A|V|1|W]]|E|$]]|$1|H|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

Unlike what some have said, you can nest a <code>container-fluid</code> inside a <code>container</code>. There is even an example on the official bootstrap website:

<a href="http://getbootstrap.com/examples/navbar/" rel="noreferrer">http://getbootstrap.com/examples/navbar/</a>

blocks|key|144700|text|在4.3文档的布局部分，https://getbootstrap.com/docs/4.3/layout/overview/#containers，它现在声明|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|144701|144702|虽然容器可以嵌套，但大多数布局不需要嵌套容器。|blockquote|144703|144704|144705|只要注意其他人对填充的描述，等等。|144706|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.3/layout/overview/#containers^0|C|1P|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|-4|5|6|7|X|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|Y|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]]]

In the Layout section of the 4.3 docs, <a href="https://getbootstrap.com/docs/4.3/layout/overview/#containers" rel="noreferrer">https://getbootstrap.com/docs/4.3/layout/overview/#containers</a>, it now states

<blockquote>
 While containers can be nested, most layouts do not require a nested container.
</blockquote>

Just be aware of what others have stated about padding, etc.

blocks|key|2936769|text|节省您的时间，切换到+CSS+-+grid+原生CSS网格。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2936770|Bootstrap容器有一个限制，如果你寻找12列限制，10像素填充挑战，加上它不是原生的(CSS内置)，用户需要将其下载到他/她的机器上，最重要的是你需要处理的潜水次数。|2936771|考虑到这一切，试一试并切换到CSS-grid+here+is+a+good+playground+to+start.|2936772|现在来看CSS-grid的缺点是它仍然与IE不兼容。|2936773|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/css/css_grid.asp^0|A|C|0|0|N|Z|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|J|3|K|5|6|7|11|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]]]

Save your time and switch to Css-grid the native CSS grid.

Bootstrap containers have a limitation, if you look for 12 column limitation, 10-pixel padding challenge, adding to that is not native (CSS builtin) where user need to download it to his/her machine, and on top of all that the number of dive which you need to process.

With all that in mind give it a try and switch to CSS-grid
<a href="https://www.w3schools.com/css/css_grid.asp" rel="nofollow noreferrer">here is a good playground to start.</a>

Now coming to the cons of CSS-grid is that still not compatible with IE.

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

<pre><code>&lt;div class="container"&gt;
 &lt;!-- Blah, GUI stuff, blah --&gt;
&lt;/div&gt;

...

&lt;div class="container"&gt;
 &lt;!-- Blah, more GUI stuff, blah --&gt;
&lt;/div&gt;
</code></pre>

My questions:

<ol>
<li>When would you ever need a single HTML page with multiple "container divs"? What benefit does this offer as opposed to just putting the entire body inside one big "container div"?</li>
<li>Would you ever want to nest "container divs" inside other ones? When/why?</li>
</ol>

Multiple and/or nested Bootstrap containers?

容器

我的理解是所有Bootstrap样式的元素都必须存在于一个<div class="container">元素中。但有时我会看到有多个“容器”的Bootstrap示例：<div class="container"> </div>...<div class=...

问多个和/或嵌套Bootstrap容器？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个和/或嵌套Bootstrap容器？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个和/或嵌套Bootstrap容器？
EN