html - 为什么导航栏的高度这么大？

Question

为什么这个导航栏的高度超过 1 行？我只希望它是 1 行。

注意:这只是一小部分代码，谁能告诉我高度这么大的原因，让我按照建议修改？我不想过多更改 html 结构。

html,body {
  height: 100%;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css">
<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-12 col-md-2 p-0 bg-primary">a</div>
    <div class="col bg-faded py-3">c</div>
  </div>
</div>

Answer 1

这是由于默认对齐方式是拉伸(stretch)。当两个元素都在同一行时它工作正常但是当有一个换行时你将有 2 行具有相同的高度并且每个元素将在内部拉伸(stretch)使你的第一个元素具有容器高度的一半:

为避免这种情况，您可以考虑更改小屏幕上的对齐方式 align-content-*-* ( https://getbootstrap.com/docs/4.2/utilities/flex/#align-content )

我们将对齐设置为 flex-start，我们在 md 断点处更改为 stretch:

html,body {
  height: 100%;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css">
<div class="container-fluid h-100">
  <div class="row h-100 align-content-start align-content-md-stretch">
    <div class="col-12 col-md-2 p-0 bg-primary">a</div>
    <div class="col bg-faded py-3">c</div>
  </div>
</div>

这是另一个问题，其中包含更多详细信息以更好地理解正在发生的事情:extra space when centering elements using flexbox