引导行和列-我需要使用行吗? [英] Bootstrap Rows and Columns - Do I need to use row?

问题描述

我只需要对Bootstrap Grid的行和列中的某个点进行说明. 在此链接上: http://getbootstrap.com/css/#grid ;引言下的第三点说: 内容应放在列中，并且只有列可以是行的直接子代."

I just need clarification with a certain point in Bootstrap Grid's rows and columns.. On this link: http://getbootstrap.com/css/#grid; the 3rd point under Introduction says: "Content should be placed within columns, and only columns may be immediate children of rows."

这到底是什么意思? 我想做的是放在2列:col-xs-4，col-xs-8;在col-xs-12内部，它本身位于一行中.可以的..

What exactly does this mean? What I am trying to do is put 2 columns: col-xs-4, col-xs-8; inside col-xs-12 which is itself inside a row. Will this work..

<div class="row">
<div class="col-xs-12">
    <div class="col-xs-4">some content</div>
    <div class="col-xs-8">some other content</div>
</div>

还是我必须在xol-xs-12内插入新行(并嵌套..i我想)，然后在该行中插入其他2个cols?

Or will I have to insert a new(and nested..i suppose) row inside xol-xs-12 and then the other 2 cols in that row ?

推荐答案

引导行和列-我需要使用行吗?

Bootstrap Rows and Columns - Do I need to use row?

是的，您需要使用行.

---

更新2018年

Yes, you need to use row.

---

Update 2018

> col关系在 Bootstrap 3和4 中是相同的.

因此，嵌套列(.col-*)必须也在.row内:

So, the nested columns (.col-*) must also be inside a .row:

<div class="row">
  <div class="col-xs-12">
    <div class="row">
       <div class="col-xs-4">some content</div>
       <div class="col-xs-8">some other content</div>
    </div>
  </div>
</div>

作为您可以在此处看到，您应该始终使用row.这在 Bootstrap 4 中非常重要，因为如果不放置在.row内，这些列将简单地垂直堆叠(包装). .row的两边都有15px的负边距，所以好处是.

As you can see here you should always use the row. This is very important in Bootstrap 4 because the columns will simply stack (wrap) vertically if not placed inside a .row. The .row has a negative margin of 15px on either side, so the benefit is that..

• container
内部100％的宽度内容
• 将内容分成行(强制cols处于在线状态)
• 嵌套网格row> col并在外侧保持对齐

• 100% width content inside container
• separate content into rows (force cols to be on line)
• nest the grid row>col and maintain alignment on outer sides

从 Bootstrap 3文档 ...

内容应放在列中，并且仅列可以是 行的直接子代.

Content should be placed within columns, and only columns may be immediate children of rows.

从引导4个文档 ...

行是列的包装.每列都有水平填充 (称为装订线)以控制它们之间的空间.这个填充 然后在具有负边距的行上抵消.这样，所有 列中的内容在视觉上向左下方对齐...内容必须放在列中，并且只有列可能是的直接子元素 行.

Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side... content must be placed within columns and only columns may be immediate children of rows.

---

https://medium.com/wdstack/how- the-bootstrap-grid-really-works-471d7a089cfc

这篇关于引导行和列-我需要使用行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！