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

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

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

为避免这种情况，您可以考虑 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

Answer 2

高度如此之大，因为您在代码中添加了 h-100，删除 h-100 显示元素的块大小

Answer 3

从class="row" 中删除h-100

解释！

当您将h-100 设置为row 时，意味着height:100% -

100%

将元素的高度设置为父元素高度的 100% 元素（在你的情况下为container-fluid）而不是auto，根据元素内部的包含

html,body {
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid h-100">
  <div class="row">
    <div class="col-12 col-md-2 p-0 bg-primary">a</div>
    <div class="col bg-faded py-3">c</div>
  </div>
</div>