Bootstrap 4 Mobile Navbar消失

问题描述

限时删除！！

我刚刚从Bootstrap 3转换到Bootstrap 4，并且遇到了移动导航栏的问题。使用切换按钮展开导航栏时，导航消失。我无法弄清楚为什么会发生这种情况。在导航栏下面有一个jumbotron，但整个移动导航栏向上移动，如下图所示。

以下是navbar和jumbotron的代码段代码：

  .navbar {position：relative;}。jumbotron {margin：0;填充：10rem 0; ;最小高度：60vh; background-color：transparent;背景：线性梯度（110deg，rgba（0,0,0,0.9）0％，rgba（0,0,0,0.9）55％，rgba（0,0,0,0.45）55％，rgba（0 ，0,0,0.45）100％），url（../../ assets / img / jumbohome.jpg）; background-attachment：scroll; background-repeat：none; background-position：left; background-size：cover;}。navbar {font-family：'Lato'，sans-serif;身高：10rem; font-size：1.7rem; & -brand {height：6rem; margin-right：5rem; }& -brand img {height：100％; }& li：不是（last-child）{margin-right：3vw; }}。navbar-light .navbar-nav .nav-link：focus，.navbar-light .navbar-nav .nav-link：hover {color：$ color-primary;}。dropdown {& -menu {position：相对的; border：0; border-radius：0; }& -item {font-size：1.7rem; &：hover，&：active {background：#fff;颜色：$ color-primary; }}}。bg-light {background-color：#fff！important;} @ media（max-width：991px）{.navbar {& -brand {margin-right：0;保证金：0汽车; }}}  

< link href =https：/ /maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.cssrel =stylesheet/>< nav class =navbar navbar-expand-lg navbar-collapse-md navbar-light fixed-top bg-light> < div class =container> < a class =navbar-brandhref =＃>< img src =alt =Logo>< / a> < button class =navbar-togglertype =buttondata-toggle =collapsedata-target =＃navbarSupportedContentaria-controls =navbarSupportedContentaria-expanded =falsearia-label =Toggle导航> < span class =navbar-toggler-icon>< / span> < /按钮> < div class =collapse navbar-collapseid =navbarSupportedContent> < ul class =navbar-nav ml-auto> < li class =nav-item active> < a class =nav-linkhref =＃>主页< / a> < /锂> < li class =nav-item dropdown> < a class =nav-link dropdown-togglehref =＃id =navbarDropdownrole =buttondata-toggle =dropdownaria-haspopup =truearia-expanded =false> ;关于< / a> < div class =dropdown-menuaria-labelledby =navbarDropdown> < a class =dropdown-itemhref =＃>我们的使命< / a> < a class =dropdown-itemhref =＃>我们的故事< / a> < a class =dropdown-itemhref =＃>我们的团队< / a> < / DIV> < /锂> < li class =nav-item dropdown> < a class =nav-link dropdown-togglehref =＃id =navbarDropdownrole =buttondata-toggle =dropdownaria-haspopup =truearia-expanded =false> ; Tag2< / a> < div class =dropdown-menuaria-labelledby =navbarDropdown> < a class =dropdown-itemhref =＃> Dropdown1< / a> < a class =dropdown-itemhref =＃> Dropdown2< / a> < a class =dropdown-itemhref =＃> Dropdown3< / a> < / DIV> < /锂> < li class =nav-item dropdown> < a class =nav-link dropdown-togglehref =＃id =navbarDropdownrole =buttondata-toggle =dropdownaria-haspopup =truearia-expanded =false> ; Tag3< / a> < div class =dropdown-menuaria-labelledby =navbarDropdown> < a class =dropdown-itemhref =＃> Dropdown1< / a> < a class =dropdown-itemhref =＃> Dropdown2< / a> < a class =dropdown-itemhref =＃> Dropdown3< / a> < / DIV> < /锂> < li class =nav-item> < a class =nav-linkhref =＃>捐赠< / a> < /锂> < / UL> < / DIV> < / div>< / nav>< div class =jumbotron> < div class =container> < H1>标语< / H1> < a href =＃class =btn-custom>了解详情< / a> < / div>< / div>

解决方案

发生这种情况是因为您在全局范围内设置了 .navbar 的高度，其中包含以下各项：

  .navbar {
 font-family：'Lato'，sans-serif; 
 height：10rem; / *这是问题* / 
 font-size：1.7rem; 
} 
  

这种方式即使菜单被折叠，但显示高度也会受到限制。然而，在那个状态下，包含下拉菜单是非常高的。因此，您可以在媒体查询中设置高度，而不是像这样：

  .navbar {
 font-family：' Lato'，sans-serif; 
 font-size：1.7rem; 
} 
 
 @media仅屏幕和（最小宽度：992px）{
 .navbar {
 height：10rem; 
} 
} 
  

I just converted from Bootstrap 3 to Bootstrap 4 and am having issues with my mobile navbar. When expanding the navbar using the toggle button, the navigation disappears. I can't figure out why this is happening. There is a jumbotron below the navbar, but the entire mobile nav shifts up, as seen in the gif below.

Here is the code snippet code of the navbar and jumbotron:

.navbar {
  position: relative;
}

.jumbotron {
  margin: 0;
  padding: 10rem 0;
  ;
  min-height: 60vh;
  background-color: transparent;
  background: linear-gradient(110deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.45) 100%), url(../../assets/img/jumbohome.jpg);
  background-attachment: scroll;
  background-repeat: none;
  background-position: left;
  background-size: cover;
}

.navbar {
  font-family: 'Lato', sans-serif;
  height: 10rem;
  font-size: 1.7rem;
  &-brand {
    height: 6rem;
    margin-right: 5rem;
  }
  &-brand img {
    height: 100%;
  }
  & li:not(last-child) {
    margin-right: 3vw;
  }
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: $color-primary;
}

.dropdown {
  &-menu {
    position: relative;
    border: 0;
    border-radius: 0;
  }
  &-item {
    font-size: 1.7rem;
    &:hover,
    &:active {
      background: #fff;
      color: $color-primary;
    }
  }
}

.bg-light {
  background-color: #fff !important;
}

@media (max-width: 991px) {
  .navbar {
    &-brand {
      margin-right: 0;
      margin: 0 auto;
    }
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-collapse-md navbar-light fixed-top bg-light">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="" alt="Logo"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      About
                </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Our Mission</a>
            <a class="dropdown-item" href="#">Our Story</a>
            <a class="dropdown-item" href="#">Our Team</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Tag2
                </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Dropdown1</a>
            <a class="dropdown-item" href="#">Dropdown2</a>
            <a class="dropdown-item" href="#">Dropdown3</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Tag3
                </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Dropdown1</a>
            <a class="dropdown-item" href="#">Dropdown2</a>
            <a class="dropdown-item" href="#">Dropdown3</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Donate</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="jumbotron">
  <div class="container">
    <h1>Tagline</h1>
    <a href="#" class="btn-custom">Learn More</a>
  </div>
</div>

解决方案

This happens because you set the height of the .navbar globally, for every state with the following:

.navbar {
    font-family: 'Lato', sans-serif;
    height: 10rem;/* this is the issue */
    font-size: 1.7rem;
}

This way the height gets limited even when the menu is collapsed, but shown. However in that state it is quite tall with the dropdown included. So you could set the height in a media query instead like so:

.navbar {
    font-family: 'Lato', sans-serif;
    font-size: 1.7rem;
}

@media only screen and (min-width : 992px) {
    .navbar {
        height: 10rem;
    }
}

这篇关于Bootstrap 4 Mobile Navbar消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..