正确的引导程序网格？ [英] Proper bootstrap grid?
问题描述
以下是我的例子
< div class =row>
< div class =col-md-12>
< div class =page-header>
HELLO
< / div>
< / div>
< / div>
我是否需要始终在 col strong>，或者我不需要使用 col ，如果我正在创建新的行
或者是否适合让它像这样
1。
< section class =content row>
< div class =col-md-12>
< div class =page-header>
HELLO
< / div>
< / div>
< div class =col-md-12>
< div class =what>
HELLO 2
< / div>
< / div>
< / section>
或者让它变成这样的正确方法
2
< div class =row>
< div class =col-md-12>
< div class =page-header>
HELLO
< / div>
< / div>
< / div>
< div class =row>
< div class =col-md-12>
< div class =page-header>
HELLO
< / div>
< / div>
< / div>
或者我需要在 row 之后使用COL吗？
3。
< div class = 行 >
< div class =page-header>
HELLO
< / div>
< / div>
< div class =row>
< div class =page-header>
HELLO
< / div>
< / div>
为什么我必须使用ROW和何时？
为什么我必须使用COL和什么时候？
这只是一个例子，如果有人能够让我知道什么是正确的方式，那么它会很好吗？ / p>
这个网格有3个部分：容器，行和列...
容器有15px的填充。该行使用-15px的边距抵消容器填充。列有15px的填充，它将内容从容器的边缘拉开，并创建一个一致的30px的装订线。
添加15px的填充的目的仅仅是否定的由负排边缘看起来很愚蠢，但重要的是允许将列嵌套在其他列内！请注意下图中红色轮廓所表示的嵌套列如何在没有获得额外填充的情况下整齐地放入封闭列中。
所以，要回答你的问题，假设你有一个 .container 或 .container-fluid 包装您的示例，1和2都格式正确。也就是说，我会使用示例1，因为它需要较少的标记（通常是件好事），并且由于您将元素分组到一个节中，因此看起来它们在语义上是连接的，因此额外的一行似乎是多余的。
正如@skelly所建议的，我建议您查看 网格 部分。下面是关于使用在那里找到的行的一些要点：
- 行必须放在a中。容器（固定宽度）或容器流体（全宽度）以便正确对齐和填充。
- 使用行来创建水平的列组。
$ b内容应放置在列中，并且只有列可以是行的直接子元素。 $ b
What is proper way to make bootstrap grid?
Here is example what I have
<div class="row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
</div>
Do i need always to make row before col, or i dont need to use col if I am creating new row
Or is it proper to make it like this
1.
<section class="content row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
<div class="col-md-12">
<div class="what">
HELLO 2
</div>
</div>
</section>
Or it is proper way to make it like this
2.
<div class="row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="page-header">
HELLO
</div>
</div>
</div>
Or does i need to use COL after row like this?
3.
<div class="row">
<div class="page-header">
HELLO
</div>
</div>
<div class="row">
<div class="page-header">
HELLO
</div>
</div>
Why i must use ROW and when? And why i must use COL and when?
This is just example, if someone can asnwer me what is proper way, then it will be nice?
The grid works with 3 parts: a container, a row and column(s)...
The container has 15px of padding. The row negates the container padding with -15px of margin. Columns have 15px of padding, which pull the content away from the edges of the container and create a consistent 30px gutter.
The purpose for adding 15px of padding that is only negated by the negative row margins seems silly, but it is essential to allow for nesting columns inside of other columns! Note in the diagram below how the nested columns indicated by the red outline fits neatly into the enclosing column without getting additional padding applied.
So, to answer your question, assuming that you have a .container or .container-fluid wrapper around your examples, both 1 and 2 are properly formatted. That said, I would use example 1, because it requires less markup (generally a good thing) and since you are grouping your elements into a section, it seems they are semantically connected, thus the extra row seems superfluous.
As, @skelly suggests, I recommend taking a look at the Grid section in the doc. Below are some of key points about the use of rows found there:
- Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
- Use rows to create horizontal groups of columns.
- Content should be placed within columns, and only columns may be immediate children of rows.
这篇关于正确的引导程序网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
