html - Bootstrap 显示 flex 高度

Question

我想通过 bootstrap 使我的导航列表与导航栏本身的高度相同。

当前 html:

<nav class="navbar navbar-expand-lg">
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link"></a>
            </li>
        </ul>
    </div>
</nav>

结果是这样的:

我想让它看起来像这样:

我目前通过给 div.collapse 一个 60 像素的固定高度和 ul.navbar-nav.mr-auto, li.nav 来修复它-item 和 a.nav-link 高度为 100%。问题是这只是一种解决方法，不适用于移动设备等。

通过查看 css，我发现 bootstrap 现在正在使用一种名为 flex 的方法。我怎样才能使用 flex 实现这一点？

Answer 1

如果您想保留默认高度，则从父级 (nav-bar) 中移除 padding-top 和 padding-bottom并将它们添加到 child (nav-link) 中就可以了，

@media only screen and (min-width: 600px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
  }
}

如果你修复了 nav-bar 的 height 那么为什么不修复 children 的 height > ?

.nav-bar{
    height: 60px;
}

@media only screen and (min-width: 600px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
    height: 60px;
  }
}

另一种选择是将 parent ( nav-bar ) 的位置设置为 relative 和 position 子级的 absolute 和 height:100% 与 top:0

.nav-bar{ 
    height: 60px;
    position: relative;
}

@media only screen and (min-width: 600px) {
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
    position: absolute;
    top: 0;
    height: 100%;
  }
}

这是一个 fiddle :https://jsfiddle.net/szuk7not/62/

PS:对于您以后的问题，请考虑添加代码片段、codePen、fiddle 或至少工作 html 和 css 以便您可以获得更准确和充分的答案。