Bootstrap h6标签边距问题[关闭]

Posted 2023-03-06

【中文标题】Bootstrap h6标签边距问题[关闭]

【英文标题】：Bootstrap h6 tag margin issue [closed]

【发布时间】：2018-10-21 23:06:36

【问题描述】：

我是 Bootstrap 的新手，我在尝试对齐标题时遇到了问题。根据屏幕截图，当我在“活动工作流程”标题上放置一个 h6 标签时，它会在其底部放置一个边距，使其偏离中心。我浏览了开发工具中的所有样式，但无法弄清楚这个边距是如何添加的。在这里寻找任何见解。

编辑：尝试从 H6 标记中拉出边距，但填充仍然存在，添加了另一个要显示的图像。

还有代码：

<div class="row">
   <div class="col-md-11">
   <h6>Active Workflow</h6>
</div>

【问题讨论】：

请发布所有相关代码以重现问题。

【参考方案1】：

它是由 Bootstrap 添加的...

.h1, .h2, .h3, .h4, .h5, .h6 
  margin-bottom: 0.5rem;

你可以删除它using margin utils with..

<h6 class="mb-0">Active Workflow</h6>

阅读Bootstrap docs on Spacing。

【讨论】：

这没有用，尽管它是有道理的。它看起来像是在将标题与列的顶部对齐，并且垂直间距类似乎都不起作用。

不看代码很难说。

【参考方案2】：

bootstrap 将默认边距添加到标题元素 (h1-h6)。您可以使用 mb-0 覆盖它

 <h6 class="mb-0">text<h6>

【参考方案3】：

所以我不确定它为什么会起作用，但我注意到在另一个页面上我没有专门使用 H6 标签，而是将它添加到标签中。出于某种原因，这完美地分隔了它。一个 h6 标签，即使上面有 mb-0，仍然是顶部对齐文本。

@html.Label("Active Workflow", new  @class = "h6" )

仅使用 h6 标签，列的高度为 23 像素，标签为 26。