为什么这个导航栏的高度超过 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>
最佳答案
这是由于默认对齐方式是拉伸(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
关于html - 为什么导航栏的高度这么大?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53976091/