html - 浏览器缩小时 Bootstrap 菜单显示不正确

Question

浏览器不缩小时菜单正常

缩小后，菜单显示不正确

这是现场演示:http://plnkr.co/edit/n9gvmUsVaPFyglnm6cIS?p=preview

以下是我使用的样式:

    @media (max-width: 767px) {
        .navbar .navbar-form {
            width: 200px;
            padding-left: 0;
            padding-right: 0;
        }
    }      
    @media (min-width: 768px) {
        .navbar .navbar-form {
            width: 400px;
        }
    }      
    .navbar .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }              
    .navbar-collapse.collapse {
        display: block !important;
    }      
    .navbar-nav > li, .navbar-nav {
        float: left !important;
    }      
    .navbar-nav.navbar-right:last-child {
        margin-right: -15px !important;
    }      
    .navbar-right {
        float: right !important;
    }

我将上面最后四种导航栏样式用于 disable the navbar从崩溃中，我也删除了汉堡菜单。

这是使用上述样式和下拉菜单的 html:

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="nav navbar-nav navbar-left">

            <a class="navbar-brand hidden-xs" ui-sref="root.list.home">My shop</a>
            <a class="navbar-brand visible-xs" ui-sref="root.list.home"><span
                    class="glyphicon glyphicon-shopping-cart"></span></a>

            <div class="pull-left">

                 <form class="navbar-form" role="search" ng-submit="c.Product.search()">

                  <div class="input-group">


                      <input type="text" class="form-control" name="srch-term" id="srch-term"/>


                      <div class="input-group-btn" style="width:1%">
                          <button class="btn btn-default btn-primary" type="submit"><i class="glyphicon glyphicon-search"></i>
                          </button>
                      </div>


                  </div>

              </form>


            </div>


        </div>


        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden-xs"><a ui-sref="root.item.postAd">My home</a></li>
                <li class="visible-xs">
                    <a ui-sref="root.item.postAd">
                        <span class="glyphicon glyphicon-home"></span>
                    </a>
                </li>

                <li uib-dropdown>
                    <a uib-dropdown-toggle href="#">
                        <span class="glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown">
                        <li><a ui-sref="root.login">Log in</a></li>
                    </ul>
                </li>

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

当浏览器缩小时，菜单无法正确呈现的原因可能是什么？

这是现场演示:http://plnkr.co/edit/n9gvmUsVaPFyglnm6cIS?p=preview

Answer 1

如果您不想在导航中使用任何移动功能，则必须删除与导航本身关联的大部分类(或覆盖它们的宽度其他规则)。由于 navbar-nav 类，您的下拉菜单仍在折叠，因为它应该在 768px 下。

*我相信您也在使用 UI-Bootstrap Dropdown Button而不是导航栏 dopdown 类，因此如果您必须使用该按钮，您很可能必须使用额外的 CSS 对其进行补偿。

.navbar.navbar-custom {
  padding-top: 5px;
  height: 50px;
}
.navbar.navbar-custom .navbar-navbar {
  display: inline;
}
.navbar.navbar-custom .nav > li > a,
.navbar.navbar-custom .nav > li > a:hover,
.navbar.navbar-custom .nav > li > a:focus {
  color: white;
  background: none;
  text-decoration: none;
}
.navbar.navbar-custom .nav-right li.dropdown .dropdown-menu {
  margin-top: 5px;
  right: 0;
  left: auto;
}
.navbar.navbar-custom .nav.nav-left {
  float: left;
}
.navbar.navbar-custom .nav.nav-right {
  float: right;
}
.navbar.navbar-custom .nav.nav-right > li,
.navbar.navbar-custom .nav.nav-left > li {
  display: inline-block;
}
.navbar.navbar-custom .nav-form {
  width: 300px;
  padding: 3px 15px;
  float: left;
}
@media (max-width: 767px) {
  .navbar.navbar-custom .navbar-navbar .nav .no-link {
    display: none;
  }
}
@media (min-width: 768px) {
  .navbar.navbar-custom .navbar-navbar .nav .glyphicon:nth-last-child(2) {
    display: none;
  }
}
@media (max-width: 480px) {
  .navbar.navbar-custom .nav-form {
    width: 53%;
  }
}
@media (max-width: 320px) {
  .navbar.navbar-custom .nav-form {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top">
  <div class="container">
    <div class="navbar-navbar">
      <ul class="nav nav-left">
        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="no-link">My shop</span></a>

        </li>
      </ul>
      <form class="nav-form">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>

        </div>
      </form>
      <ul class="nav nav-right">
        <li><a href="#"><span class="glyphicon glyphicon-home"></span> <span class="no-link">My home</span></a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-chevron-down"></span> </a>

          <ul class="dropdown-menu">
            <li><a href="#"> Log in</a>

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