Bootstrap中容器，行和跨度之间的差异 [英] Differences between container, row and span in Bootstrap

问题描述

在使用Twitter Bootstrap时，是否应将行div嵌套在容器div中，并将我的所有span div放入嵌套行中?那是最佳实践吗?

While using Twitter Bootstrap, should I nest a row div within a container div and put all my span divs within the nested row? Is that the best practice?

如果我将span div直接放在行div中并且不将行div包含在容器div中怎么办?

What if I put span divs directly within my row div and do not enclose the row div within a container div?

如果我将span div直接放在我的容器div中而不使用行div怎么办?

What if I put span divs directly within my container div, without using the row div at all?

我所知道的是容器为940px，行为960px.但是，我看到了在容器div中放置一个行div的示例.这是有帮助的还是会使显示混乱?

All I know is that a container is 940px and a row is 960px. However, I have seen examples where a row div has been put within a container div. Is that going to help or will it make the display messy?

请向我解释在什么情况下可以遵循的最佳方法.

Please explain me the best methods to follow and under what circumstances.

推荐答案

通常，您将使用容器>行>跨度

我想不出一个例子，您问的其他2个选项会破坏任何东西，但它们可能无法给您想要的结果.

I can't think of an example where the the other 2 options you ask about would break anything, but they may not give you the results you want.

包装conatiner div中的所有内容将管理页面的宽度和侧边距.使用行div将确保您的跨度按照您想要的方式进行布局.例如，假设有两行，每行只有一个span4.如果不使用div行，则2个span4会一个浮在另一个旁边，而不是垂直堆叠.

Wrapping everything in the conatiner div will manage the width of the page and side padding. Using the row div will ensure that your spans are layed out the way you want. For example imagine 2 rows that each have just have a single span4. If you don't use the row div the 2 span4s will float one next to the other instead of being stacked vertically.

在很多情况下，您会在Bootstrap布局中嵌套容器，第一个可能会遇到的是导航栏，一旦开始使用流畅的Bootstrap布局，您将看到容器div并不总是940px ，但如果坚持使用容器>行>跨度的方式，则可以避免一些麻烦，尤其是在刚开始的时候.

There are many cases where you will have nested containers in a Bootstrap layout, the first one you will likely come across is in the nav bar, and once you start using fluid Bootstrap layouts you will see that container divs are not always 940px, but if you stick to the container > row > span arrangement it will save you some grief, especially if you are just starting.

祝你好运！

这篇关于Bootstrap中容器，行和跨度之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！