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

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

这是由于默认对齐方式为拉伸。当两个元素都在同一行中时，它会很好地工作，但是当有换行时，您将有两行具有相同的高度，并且每个元素都将在内部延伸，使您的第一个元素的高度为容器的一半：

为避免这种情况，您可以考虑使用align-content-*-*（https://getbootstrap.com/docs/4.2/utilities/flex/#align-content）

在小屏幕上更改对齐方式

我们将对齐方式设为flex-start，在stretch断点处将其更改为md：

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

从h-100删除class="row"

解释！

当您将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>