是否必须将所有内容（即使只是一列）放在行内？

Question

在 Bootstrap 中，所有内容（例如，即使只是放置在页面中间的基本文本块）都必须放置在列和行中。我的网站似乎可以正常工作：

<div class="container-fluid">
   <h2>My Heading</h2> 
   <p>This Is Content On the page</p> 
</div>

然而，有人告诉我应该是这样的：

<div class="container-fluid">
   <h2>My Heading</h2> 
   <div class="row"> 
      <div class="col">I'm content inside the grid</div> 
   </div> 
</div>

然而，在引导站点本身的一些模板上，它们并不总是使用列和行。

我真的很困惑......

谢谢

Answer 1

不，并非所有内容都需要放在.rows 中。

.rows 和.cols 只是为您提供了一个可自定义的网格系统（即：列数、装订线大小、响应断点是可以自定义的一些东西）旨在在不同的页面上以不同的方式显示内容宽度。这（以及将行划分为 12 列）就是它的设计目的。

rows 和cols 的唯一目的是在不同的页面宽度下以不同的方式划分空间并提供一些小的填充（排水沟）。如果您的部分内容不需要它，请不要使用它。每当您有想要根据自己的自定义规则显示的部分时，您都可以简单地包含它并根据需要设置样式。

因此，例如，这是完全有效的，可以在各种 Bootstrap 示例中看到：

<div class="container">
  <div class="row">
     <div class="col">
       ... normal layout cols here
     </div>
  </div>
  <div> 
     your custom stuff here. you need to provide responsiveness CSS rules for this content.
     Out of the box, being a `<div>`, this will fill all the available width
     if, for example, it was included in a `.container-fluid`, 
     it would span the entire browser window, at all screen widths.
  </div>
  <div class="row">
     <div class="col">
       ... more normal layout here...
     </div>
  </div> 

但是，当您想使用.cols 时，您应该将它们作为.rows 的直接子代。如果你不这样做，你会在你的内容中看到一些令人讨厌的水平滚动条，因为网格有一个负边距和（正）填充系统来满足各种宽度尺寸的排水沟。

Answer 2

使用这个基本示例，一切正常，尤其是当标题居中时。对 Bootstrap 网格使用不同的方法通常不是一个好主意。

来自引导程序docs：

在网格布局中，内容必须放在列内，并且只能 列可以是行的直接子级。

• 因为长期会出现对齐问题。
• 其次，当您开始将 SASS 与 Bootstrap 一起使用并更改网格变量时，一切都会保持一致并由 一处。

在您的示例中，如果要对齐标题，则需要添加 ma​​rgin-left 以便与 我在网格内的内容 对齐。

看看这个例子，无论有没有行/列，一切都是如何对齐的：https://codepen.io/LaCertosus/pen/KKKzVqR

<div class="container-fluid mt-5">
  <div class="row">
    <div class="col">
      This text is inside <b>row</b> and <b>col</b>
    </div>
  </div>
  <div class="row">
    This text is only inside <b>row</b>
  </div>
  <div class="col">
    This text is only inside <b>col</b>
  </div>
  <div>
    This text is only <b>container</b>
  </div>
</div>
<div>
  This text is outside <b>container</b>
</div>

问为什么我必须生成这么多样板是正确的问题，但从长远来看，当元素需要在不同的屏幕尺寸中对齐和缩放时，它就会出现。