列必须是行的直接子代吗? [英] Columns must be immediate children of rows?

问题描述

列必须是行的直接子级，否则我可以在没有列的情况下在行中包含其他div?我正在使用drupal，它在我创建的容器或行中产生了很多div.

Columns must be immediate children of rows or I can have other divs inside a row without being a column? I'm working with drupal and it produces a lot of divs inside a container or row I've created.

例如，我必须始终遵循以下结构:

For example I'm restricted to follow this structure always:

<div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

或者我可以做这样的事情:

Or I can do something like this:

<div class="container">
  <div class="row">
    <div class="something">
      Something
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="something__else">
      Something else
    </div>
  </div>
</div>

推荐答案

来自

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

"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... In a grid layout, content must be placed within columns and only columns may be immediate children of rows."

因此，列具有专门用于行内填充的填充.如果您使用的不是col，则内容将无法在左侧(和右侧)正确对齐，如在本示例中使用边框看到的那样.

Therefore, the columns have padding that is specifically designed to work inside the row. If you use other than col, the content will not be aligned correctly on the left (and right) side as you can see with this example using borders...

https://www.codeply.com/go/hDcyKs2cWy

这篇关于列必须是行的直接子代吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！