bootstrap 是否支持 col in row without container

Question

我正在使用 bootstrap 4.6.0，想知道是否支持下一次使用。一切正常，但我不应该使用另一个容器吗：

<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      <!-- <div class="container-fluid"> -->
      <div class="row">
        <div class="col-6">A1</div>
        <div class="col-6">A2sdfgsdfgsdfgsdfgsd fgsdfgdfgsdfgsdfg</div>
      </div>
      <!-- </div> -->
    </div>
    <div class="col-6">
      <h1>Blasdfgsdfgsdfgsdfgsdfgsdsdfgsdfgsdfgsdfgsdfgsd sdfgsdfgsdfgsdfgsdfgsd</h1>
    </div>
  </div>
</div>

这种用法有什么缺点吗？检查bootstrap .container-fluid，只有这个样式：

.container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Answer 1

.container 和 .container fluid 之间的区别在于 .container 应用了最大宽度样式规则。这设置为 1170px，当您左右添加 15px 填充时，总列宽为 1200px。

您提供的样式中的 margin:0 auto 表示 .container 1200px 列在视口中水平居中。

这是它们之间的唯一区别，因此可以使用其中之一。 .container-fluid 是相同的，除了它没有 max-width 样式，因此占据了视口的整个宽度。

您所做的只是在您的列中应用一个嵌套行，这是偏移列的左右填充所必需的。这是正确的——否则你会有 30 像素的左右间距。但是你只需要一个父 div 带有 .container 或 .container-fluid class.

Answer 2

无需使用 container 或 container-fluid 类来嵌套行。

文档：https://getbootstrap.com/docs/4.6/layout/grid/#nesting

.bd-example-row .row>.col, .bd-example-row .row>[class^="col-"] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,0.15);
    border: 1px solid rgba(86,61,124,0.2);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bd-example-row">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

只有最外面的一行需要一个容器。如“Nesting”的文档所示，内部行直接放在列内。

此外，container docs 状态...

"While containers can be nested, most layouts do not require a nested container."

bootstrap 是否支持 col in row without container

Does bootstrap support col in row without container

html

col

bootstrap-4