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

【问题标题】：Bootstrap h6 tag margin issue [closed]Bootstrap h6标签边距问题[关闭]
【发布时间】：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>

【讨论】：

【解决方案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。

【讨论】：