Bootstrap Nav在调整大小时消失 [英] Bootstrap Nav Disappears on Resize

问题描述

我有一个Bootstrap 3导航栏。当我将浏览器窗口缩小到低分辨率或使用手机访问页面时，我没有菜单。通常，使用Bootstrap我有一个折叠的导航，但无处可查。

I have a Bootstrap 3 navbar. When I scale the browser window to a low resolution or access the page with my mobile I have no menu. Usually, with Bootstrap I have a collapsed navigation but it is nowhere to be found.

以下是HTML：

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.php"><img src="images/logo.png"></a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="index.php">Home</a></li>
              <li class="aktiv" ><a href="advertiser.php">Advertisers</a></li>
              <li><a href="publisher.php">Publishers</a></li>
              <li><a href="#" data-toggle="modal" data-target="#aboutModal">About</a></li>
              <li><a href="#" data-toggle="modal" data-target="#pressModal">Press</a></li>
            </ul>
        </div>
      </div>
</nav>

CSS：

CSS:

.navbar {
    background-color: #333E48;
    border: 0;
    display: block!important; /* From Stack Overflow */
}

.navbar-brand > img,
.navbar-brand {
    padding:0px;
    margin:0;
}

.navbar-brand > img {
    padding: 4px;
    height: 50px;
    margin: auto;
    vertical-align: middle; 
    display: inline-block;
}

.navbar-brand,
.navbar-nav li a {
    line-height: 90px;
    height: 90px;
    padding-top: 0px;
}

.nav-collapse.collapse {
    height: auto !important; /* From Stack Overflow */
    overflow: visible !important; /* From Stack Overflow */
}

我添加了显示：block！important; 到 .navbar 在阅读 Nav在调整大小后消失

我添加了 height：auto！important; overflow：visible！important; to .nav-collapse.collapse 阅读后 Twitter引导响应式导航在打开和关闭后消失

I added height: auto !important; overflow: visible !important; to .nav-collapse.collapse after reading Twitter bootstrap responsive navigation disappears after opening and closing

问题仍然存在。

推荐答案

在您的问题中，您不清楚切换按钮是否打开和关闭菜单

It isn't clear in your question but your missing the toggle button to open and close the menu when your viewport is reduced, otherwise the mobile menu will always be open.

移动菜单将一直处于打开状态。

nav.navbar-default  {
  background: #333E48;
  border: 0;
}
.navbar-default .navbar-brand > img,
.navbar-default .navbar-brand {
  padding: 0px;
  margin: 0;
}
.navbar-default .navbar-brand > img {
  padding: 4px;
  height: 50px;
  margin: auto;
  vertical-align: middle;
  display: inline-block;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav li a {
  line-height: 90px;
  height: 90px;
  padding-top: 0px;
}
.navbar-default .nav-collapse.collapse {
  height: auto !important;
  /* From Stack Overflow */
  overflow: visible !important;
  /* From Stack Overflow */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand" href="index.php">
        <img src="http://placehold.it/100x50/fff/fff" />
      </a>

    </div>
    <div class="collapse navbar-collapse" id="bs-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.php">Home</a>

        </li>
        <li class="aktiv"><a href="advertiser.php">Advertisers</a>

        </li>
        <li><a href="publisher.php">Publishers</a>

        </li>
        <li><a href="#" data-toggle="modal" data-target="#aboutModal">About</a>

        </li>
        <li><a href="#" data-toggle="modal" data-target="#pressModal">Press</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

这篇关于Bootstrap Nav在调整大小时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！