代码之家 › 专栏 › 技术社区 › huan feng

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

bootstrap-4 responsive-design css html

huan feng · 技术社区 · 6 年前

为什么这个导航栏的高度超过一行?我只想要一排。

注意:这只是代码的一小部分,有人能告诉我为什么高度这么大,所以我可以根据建议修改吗?我不想改变太多的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>

3 回复 | 直到 6 年前

Temani Afif 6 年前

这是因为默认的对齐方式是拉伸。当两个元素在同一行中时,它可以很好地工作,但是当有一个环绕时,您将有两条高度相同的线,并且每个元素都将在内部拉伸,使您的第一个元素具有容器高度的一半:

为了避免这种情况,您可以考虑在小屏幕上更改对齐方式。 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

Nisharg Shah 6 年前

高度太大了,因为你加了 h-100 在您的代码上,删除 H-100 显示元素的块大小

××× × ×××× 6 年前

去除 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>