问题
I'm fairly new to Bootstrap and I'm having a problem trying to align a header. Per the screenshots, when I put an h6 tag on the "Active Workflow" title it puts a margin on the bottom of it that makes it off center. I went through all of the styles in dev tools, and cannot figure out how this margin is getting added. Looking for any kind of insight here.
EDIT: Tried pulling the margin off the H6 tag but the padding is still there, added another image to display.
And the code:
<div class="row">
<div class="col-md-11">
<h6>Active Workflow</h6>
</div>
回答1:
It's added by Bootstrap...
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 0.5rem;
}
You can remove it using margin utils with..
<h6 class="mb-0">Active Workflow</h6>
Read the Bootstrap docs on Spacing.
回答2:
bootstrap add default margin to heading element (h1-h6). you can override this by using mb-0
<h6 class="mb-0">text<h6>
回答3:
So I'm not sure why it works, but I noticed that on another page I wasn't using an H6 tag specifically, I had added it to a label. For some reason, this spaces it perfectly. An h6 tag, even with mb-0 on it, still top justifies the text.
@Html.Label("Active Workflow", new { @class = "h6" })
With just the h6 tag, the column is 23 pixels in height, with the label it's 26.
来源：https://stackoverflow.com/questions/50293880/bootstrap-h6-tag-margin-issue