Question

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

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

<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>

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

<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>

Answer 1

通常可以对我有所帮助的是在元素上定义边框。因此，我可以轻松地测试CSS是否按照我想要的方式工作。就像Akber所说的那样，row和col是类，因此您可以在需要时使用它们。但是请查看以下链接：Bootstrap grid documentation，以这种方式使用框架。祝你好运！

Answer 2

我们遵循该框架的原因是，编写代码可以让同事和您自己清晰地读取，而当您不可避免地在6个月内回到代码时，您和您自己也可以读取。可以使用类和结构不一致的代码编写代码，但是其他人将无法阅读。

tl; dr-是的，这很好，但是您不应该这样做。

Answer 3

从Bootstrap docs ...

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

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

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

列必须是行的直接子代吗？

3 个答案: