时间戳

首页 > 解决方案 > 是否必须将所有内容（即使只是一列）放在行内？

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

问题描述

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

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

我真的很困惑...

谢谢

标签： htmlcsstwitter-bootstrap

解决方案

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

从引导文档：

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

  • 因为从长远来看会出现对齐问题。
  • 其次，当您开始使用带有 Bootstrap 的 SASS 并更改网格变量时，一切都会保持一致并从一个地方进行控制。

在您的示例中，如果要对齐标题，则需要添加一个margin-left，以便与I'm content inside grid对齐。

看看这个例子，一切如何与行/列对齐：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>

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

推荐阅读