想让 Nav-Item 与 Nav-Bar 高度相同答案

【问题标题】：Want to have Nav-Item be same height as Nav-Bar想让 Nav-Item 与 Nav-Bar 高度相同
【发布时间】：2019-12-30 19:54:48
【问题描述】：

我正在使用 Bootstrap 4 并试图使导航项与我的导航栏具有相同的高度，这样当我向其添加背景颜色时，它看起来就像穿过导航栏的条纹。

最初，该项目居中并在顶部和底部留有空间。我添加了负边距以使其靠在顶部，但当我尝试添加“margin-bottom”时同样没有用

然后我尝试修复导航栏的高度，但是当我这样做并单击切换以降低导航栏项目时，它们没有显示出来，因为固定的高度阻止了它出现。

<body>
<nav class="navbar navbar-dark bg-dark text-center">
    <div class="container">
        <div class="mr-auto order-0" class= "d-flex align-items-stretch">
            <a class="navbar-brand ml-auto" style="background-color:red; line-height: 58px; margin-top:-9px; padding: 0 20px 0 20px;" class="nav-item active" href="#">Matthew Krebs</a>           
        </div>
        <a class="navbar-brand text-center" href="#"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
            aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto mx-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
</body>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

一些事情：

我将内联 CSS 更改为单独的类，仅用于红色背景
添加了nav-link 类，以便您可以看到顶部nav-item 的行为以及单击汉堡菜单时显示的行为
navbar 类有一个填充，我们必须覆盖它以处理条纹外观
确保您的 CSS 在引导后加载，这样您就可以在不使用 !important 的情况下覆盖它

工作 sn-p 如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-dark bg-dark text-center">
  <div class="container">
    <div class="mr-auto order-0" class="d-flex align-items-stretch">
      <a class="nav-item  nav-link my-custom-style" href="#">Matthew Krebs</a>
    </div>
    <a class="navbar-brand text-center" href="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto mx-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
                    </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<style>
.navbar {
  padding-top: 0;
  padding-bottom: 0;
}
/* just to highlight our nav-item */

.my-custom-style {
  background-color: red;
}

.nav-link {
  border: 1px dotted yellow;
}
</style>

【讨论】：

【解决方案2】：

只需从<nav> 元素中删除填充即可达到预期的效果。最简单的方法是将p-0 类添加到<nav>。 Bootstrap 包括几个边距和填充实用程序类。 Read about them here.

<nav class="navbar navbar-dark bg-dark text-center p-0">
  <div class="container">
    <div class="mr-auto order-0" class="d-flex align-items-stretch">
      <a class="navbar-brand ml-auto"class="nav-item active" href="#">
        Matthew Krebs
      </a>
    </div>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarResponsive">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto mx-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Codepen example.

【讨论】：

【解决方案3】：

给你！

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav style="padding-top: 0px; padding-bottom: 0px;" class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
    <script>
      document.querySelectorAll(".nav-item").forEach(item => {
        item.style.height = document.getElementById("navbar").offsetHeight;
        item.style.backgroundColor = 'aqua';
        item.style.marginRight = '5px';

      })
    </script>
  </body>
</html>

【讨论】：