Bootstrap h 标签与行类对齐

Posted 2023-03-05

【中文标题】Bootstrap h 标签与行类对齐

【英文标题】：Bootstrap h tag alignment with row class

【发布时间】：2021-02-19 19:40:16

【问题描述】：

我正在尝试使用引导程序在表单元素顶部对齐标题。并有以下代码：

<div class="container">
   <h4>Heading</h4>
   <div class="row">
      <div class="col">
         1 of 2
      </div>
   </div>
</div>

jsfiddle.net中的输出如下：

为什么 Heading 不与它下面的 div 左对齐？

【参考方案1】：

您的问题无法重现。请提供更多上下文，例如您的 CSS 或包含的库。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <h4>Heading</h4>
   <div class="row">
      <div class="col">
         1 of 2
      </div>
   </div>
</div>

如果您在 sn-p 上运行此命令，您可以看到“1 of 2”具有相同的对齐方式。 事实上，row 类的左右有 -15px 边距。但是col 类有一个+15px padding左右。