Bootstrap中容器,行和跨度之间的差异

use*_*285 35 css twitter-bootstrap

使用Twitter Bootstrap时,我应该在容器div中嵌套行div并将所有span div放在嵌套行中吗?这是最好的做法吗?

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

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

我所知道的是一个容器是940px,一行是960px.但是,我已经看到了将div放在容器div中的示例.这会有所帮助还是会让显示器变得混乱?

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

Dav*_*roa 23

通常,您将使用container> row> span

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

将所有内容包装在conatiner div中将管理页面宽度和侧边填充.使用行div将确保您的跨度按您想要的方式布局.例如,想象两行,每行只有一个span4.如果不使用行div,则2 span4s将浮动一个而不是垂直堆叠.

在很多情况下,您将在Bootstrap布局中拥有嵌套容器,您可能遇到的第一个容器位于导航栏中,一旦您开始使用流体Bootstrap布局,您将看到容器div不总是940px,但如果你坚持容器>行>跨度安排,它会为你节省一些悲伤,特别是如果你刚刚开始.

祝好运!

  • 请注意,在bootstrap v3中,此答案不再正确.除了col-*替换span*之外,使用嵌套容器不再是好习惯. (3认同)

Zim*_*Zim 22

你应该有row内部的container,因为使用container将确保集装箱在整个页面居中均匀甚至利润率,因为 containermargin-left:auto;margin-right:auto;在CSS.

使用row时,你想spanX的出现在同一行.

spanX那些不在里面的东西row会包裹起来.

这是一个演示,将向您展示差异

  • Skelly - 这是一个非常好的演示,说明这些东西是如何工作的.谢谢发帖. (3认同)

小智 5

A row设计用于进入container.A span设计用于进入row.

如果您使用除container> row> span之外的任何其他组合,渲染可能会变得不可预测.

最终,如果您的代码有效,那么您就可以了.没有理由被其他人所做的事情所束缚.但是如果你改变它,确保它是有充分理由的,并且你在任何地方评论代码来解释你的思考过程.