我什么时候应该在 Twitter Bootstrap 中使用容器和行? [英] When should I use container and row in Twitter Bootstrap?
问题描述
请向我解释何时使用 container 和 row 类.我不确定，因为 Bootstrap 的文档对此部分非常不清楚.
我使用的是 Bootstrap 3.
container 是 row 元素的容器.
row 元素是列的容器(文档称之为网格系统)
此外，container 设置内容的边距，处理布局的响应行为.
因此，container 类通常用于根据 Bootstrap 项目的样式指南创建装箱"内容.
如果您想开箱即用"创建全宽网格，您只能使用带有列的 row 元素(跨越通常的 12 列).
container 和 row 类用于主体内的元素.所以一个基本的布局是:
<身体><div class="容器"><div class="row"><div class="col-md-xx"></div>...<div class="row"><div class="col-md-xx"></div>...
</html>
对于盒装响应式布局.
如果您省略 container，您将获得全角布局.
大屏幕示例
Jumbotron 是 container 行为的一个很好的例子.如果您将 Jumbotron 元素放在 container 元素中，它具有圆形边框和基于响应宽度的固定宽度.如果 Jumbotron 在容器外，它会跨越全角而没有边界.
Please explain to me when to use the classes container and row. I'm not sure because the documentation of Bootstrap is quite unclear about this part.
I'm using Bootstrap 3.
container is a container of row elements.
row elements are containers of columns (the docs call it grid system)
Also, container sets the content's margins dealing with the responsive behaviors of your layout.
Thus the container class is often used to create 'boxed' contents based on the style guidelines of the Bootstrap project.
If you want to go "out of the box" creating a full width grid you can use only row elements with columns inside (spanning the usual 12cols total).
The container and row classes are for elements inside the body.
So a basic layout would be:
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-xx"></div>
...
</div>
<div class="row">
<div class="col-md-xx"></div>
...
</div>
</div>
</body>
</html>
For a boxed responsive layout.
If you omit the container you'll get a full-width layout.
Jumbotron example
Jumbotron is a good example of the container behavior. If you put a Jumbotron element in a container element it has rounded borders and a fixed width based on the responsive width.
If the Jumbotron is outside a container, it spans full-width without borders.
这篇关于我什么时候应该在 Twitter Bootstrap 中使用容器和行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
