CSS Bootstrap 中容器、行和跨度之间的差异
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16621929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Differences between container, row and span in Bootstrap
提问by user2396285
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?
在使用 Twitter Bootstrap 时，我应该在容器 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?
如果我将跨度 div 直接放在我的行 div 中并且不将行 div 包含在容器 div 中怎么办？
What if I put span divs directly within my container div, without using the row div at all?
如果我将 span div 直接放在我的容器 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?
我只知道一个容器是 940 像素，一行是 960 像素。但是，我见过将行 div 放入容器 div 的示例。这会有所帮助还是会使显示变得混乱？
Please explain me the best methods to follow and under what circumstances.
请向我解释在什么情况下遵循的最佳方法。
采纳答案by David Taiaroa
In general you would use container > row > span
一般来说，你会使用container > row > span
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.
我想不出一个例子，你问的其他 2 个选项会破坏任何东西，但它们可能不会给你想要的结果。
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.
包装容器 div 中的所有内容将管理页面和侧边距的宽度。使用行 div 将确保您的跨度按您想要的方式布置。例如，想象 2 行，每行只有一个 span4。如果您不使用行 div，则 2 个 span4s 将一个紧挨着另一个浮动，而不是垂直堆叠。
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 > spanarrangement it will save you some grief, especially if you are just starting.
在很多情况下，您将在 Bootstrap 布局中嵌套容器，您可能会遇到的第一个是在导航栏中，一旦您开始使用流畅的 Bootstrap 布局，您将看到容器 div 并不总是 940 像素，但是如果你坚持容器>行>跨度排列它会为你节省一些悲伤，特别是如果你刚刚开始。
Good luck!
祝你好运！
回答by Zim
You should have rowinside a container, since using the containerwill ensure that the container is evenly centered across the entire page with even margins since containerhas margin-left:auto;margin-right:auto;in the CSS.
你应该有row内部的container，因为使用container将确保集装箱在整个页面居中均匀甚至利润率，因为 container有margin-left:auto;margin-right:auto;在CSS。
Use rowwhen you want spanX's to appear on the same line.
使用row时，你想spanX的出现在同一行。
spanX's that are not inside rowwill wrap.
spanX不在里面的row将包裹。
回答by dclatzen
A rowis designed to go inside of a container.
A spanis designed to go inside of a row.
Arow旨在进入 a 内部container。Aspan旨在进入 a 内部row。
Rendering could get unpredictable if you go with any other combination besides container > row > span .
如果您使用除container > row > span之外的任何其他组合，渲染可能会变得不可预测。
Ultimately if your code works, then you're doing okay. There is no reason to get locked into what other people have done. BUT if you change it up, make sure it's for a good reason, and that you comment the code everywhere to explain your thought process.
最终，如果您的代码有效，那么您就做得很好。没有理由拘泥于其他人的所作所为。但是如果你改变它，确保它有一个很好的理由，并且你在任何地方注释代码来解释你的思考过程。
