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

时间:2013-05-18 07:46:22

标签: css twitter-bootstrap

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

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

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

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

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

3 个答案:

答案 0 :(得分:23)

一般情况下,您会使用容器>行>范围

我想不出一个例子,你问的其他2个选项会破坏什么,但是它们可能无法给你想要的结果。

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

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

祝你好运!

答案 1 :(得分:22)

row中应该有container,因为使用container将确保容器在整个页面中均匀居中,并且container具有margin-left:auto;margin-right:auto; { CSS中的{1}}。

如果希望row出现在同一行,请使用spanX

不在spanX内的

row将换行。

Here's a demo that will show you the differences

答案 2 :(得分:5)

row旨在进入containerspan旨在进入row

如果您使用除容器>之外的任何其他组合,渲染可能会变得无法预测行>范围

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