多个引导程序容器和/或嵌套引导程序容器？

我的 理解是，所有 Bootstrap 样式的元素必须存在于 <div class="container">元素中。但有时我会看到 Bootstrap 的例子，其中包含多个“容器”:

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


...


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

我的问题是:

  1. 何时需要一个具有多个“容器 div”的 HTML 页面？与仅仅将整个主体放在一个大的“容器 div”中相比，这样做有什么好处？
  2. 您是否曾经想要在其他容器中嵌套“容器 div”? 何时/为什么？
108179 次浏览
小开
最佳答案

  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.

    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.

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

    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].

小开

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 )

http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

see above template example to understand

小开

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

http://getbootstrap.com/examples/navbar/

小开

In the Layout section of the 4.3 docs, https://getbootstrap.com/docs/4.3/layout/overview/#containers, it now states

While containers can be nested, most layouts do not require a nested container.

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

小开

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 here is a good playground to start.

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

小开

Bootstrap 5.0+ Update

The official documentation explicetly states that:

While containers can be nested, most layouts do not require a nested container.

Go on and do it if you want! :)


提交答案