Bootstrap 4 导航栏 - 在移动设备上没有高度

Question

如何将所有视口中的 bootstrap 4 导航栏高度设置为 80px？

我在“.navbar”中尝试 "min-height: 80px"，但导航栏坏了。

sass代码：

$navbar-bg:             #26f3fd;
$navbar-height:         80px;

.navbar {
    background-color: $navbar-bg;
    min-height: $navbar-height;
}

html代码：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="main-navbar" data-toggle="sticky-onscroll">
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-md-center" id="navbar-content">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="<?= esc_url(home_url('/')); ?>">Accueil</a>
        </li>
    </ul>
</div>

http://codepen.io/juavenel/pen/xqMPrQ/

Answer 1

问题是因为您的导航栏不包含 navbar-brand，所以当导航栏垂直堆叠时它的高度会折叠。

这是一个已知问题，将在测试版中修复：https://github.com/twbs/bootstrap/pull/22230

解决方法是包含一个空的占位符 navbar-text 或 navbar-brand..

<nav class="navbar navbar-toggleable-md navbar-light bg-faded py-3" id="main-navbar">
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <span class="navbar-text">&nbsp;</span>
    <div class="collapse navbar-collapse justify-content-md-center" id="navbar-content">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Accueil</a>
        </li>
      </ul>
    </div>
</nav>

http://www.codeply.com/go/FIKesgfDhL

此外，您可以使用垂直填充 (py-3) 来增加导航栏的高度并使项目垂直居中。

Bootstrap 4 导航栏 - 在移动设备上没有高度

Bootstrap 4 navbar - no height on mobile

navbar

bootstrap-4