根据页面宽度更改引导菜单

Question

我正在开发一个Web应用程序，当应用程序达到max-width的最大宽度时，我在应用程序中输入了引导菜单：770px菜单与菜单中的菜单相同页面的正常宽度。 但是当菜单navbar-header中没有显示时，它不会退出，菜单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

我不确定如果我明白你的意思但是如果要禁用导航栏崩溃，你可以简单地添加这个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

Answer 2

您只需删除：

• 带有“navbar-header”类的元素中的按钮
• 删除css类“collapse navbar-collapse”

通过这种方式，按钮消失，您无需添加额外的css规则。 所有宽度的主条都将保持可见。