html - 根据页面宽度更改 Bootstrap 菜单

Question

我正在开发一个 web 应用程序，我在我的应用程序中放入了我想要的 Bootstrap 菜单，当应用程序达到最大宽度 max-width: 770px 时，菜单将与正常宽度的菜单相同页面的。但是当在菜单 navbar-header 中显示 none 时，它​​不会退出并且菜单 nav navbar-nav 不会出现在页面的最大宽度 770px

页面正常宽度的菜单

最大宽度为 770px 的菜单

 <div class="body-wrap" >

  <nav class="navbar navbar-inverse" role="navigation" id="azul">
  <div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <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" ></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
      <div class="conteudo"><li><a href="#">Pagina Principal</a></li></div> 
      <div class="conteudo"> <li><a href="#">Contato</a></li></div>
    <li class="dropdown">
        <div class="conteudo"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Produtos <b class="caret"></b></a></div>
      <ul class="dropdown-menu">
        <li><a href="#">Camisetas</a></li>
         <li class="divider"></li>
        <li><a href="#">Calças</a></li>
         <li class="divider"></li>
        <li><a href="#">Bermudas</a></li>
      </ul>
    </li>
  </ul>




</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->

CSS

@media (max-width: 770px) {

body{

background-color: yellow;
 }


  .navbar-header{
  display: none;
 }

  .nav .navbar-nav{

display: inline;
   }

  }

Answer 1

我不确定我是否明白你的意思，但如果你想禁用 navbar-collapse 你可以简单地添加这个 CSS:

.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;
}

Fiddle here