强制bootstrap导航到肖像ipad移动视图

Question

我目前有一个引导程序导航，将显示在768px的移动导航汉堡包，但链接不显示在垂直列表直到767px。我需要让导航在移动肖像和ipad肖像上显示相同的链接。

CSS：

.navbar-fixed-top { 
    background-color: #eee; 
} 

.navbar-toggle { 
    float: left; 
} 

.icon-bar { 
    background-color: #000; 
} 

.margin-top-ten-px { 
    margin-top: 10px; 
} 

.margin-bottom-ten-px { 
    margin-bottom: 10px; 
} 

.full-width-button { 
    width: 100%; 
    -webkit-border-top-right-radius: 4px; 
    -webkit-border-bottom-right-radius: 4px; 
    border-top-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
} 


/* ---------------------- NAVBAR RENDERING ---------------------- */ 

.login-dropdown { 
    width: 220px; 
    border-top: solid 5px #6cbc42; 
    border-left: solid 1px #6cbc42; 
    border-right: solid 1px #6cbc42; 
    border-bottom: solid 2px #6cbc42; 
    border-bottom-left-radius: 4px; 
    border-bottom-right-radius: 4px; 
} 

.two-column-navbar { 
    width: 50em; 
    height: auto; 
    margin: 4px 8px; 
    float: right; 
    border-top: solid 5px #6cbc42; 
    border-left: solid 1px #6cbc42; 
    border-right: solid 1px #6cbc42; 
    border-bottom: solid 2px #6cbc42; 
    border-bottom-left-radius: 4px; 
    border-bottom-right-radius: 4px; 
} 

.three-column-navbar { 
    width: 46em; 
    height: auto; 
    margin: 4px 8px; 
    float: right; 
} 

.search { 
    @include breakpoint(smmax) { 
    display: none; 
    } 
} 

@media only screen and (max-width: 991px) { 
    .nav>li { 
    position: relative; 
    display: block; 
    float: none; 
    } 
    .navbar { 
    height: 121px; 
    } 
    .navbar-brand { 
    margin-left: 9%; 
    } 
    .navbar-right { 
    margin-right: 20%!important; 
    margin-top: -167px!important; 
    } 
    .navbar-collapse.collapse { 
    display: none !important; 
    } 
    .navbar-collapse.collapse.in { 
    display: block !important; 
    } 
    .navbar-header .collapse, 
    .navbar-toggle { 
    display: block !important; 
    } 
    .navbar-header { 
    float: none; 
    } 
    #bs-example-navbar-collapse-1 { 
    background-color: #eee; 
    } 
} 

HTML：

<div class="container"> 
    <nav class="navbar navbar-fixed-top" role="navigation" style="padding: 0px; margin: 0px;"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <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 active" href="#"><i class="fa fa-home"></i></a> 
     </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <form class="navbar-form navbar-left search" role="search"> 
      <div class="form-group"> 
      <input class="form-control" placeholder="Search" type="text"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">ABOUT US<span class="caret"></span></a> 
      <div class="dropdown-menu row col-lg-3 one-column-navbar" role="menu"> 
       <div class="col-md-12"><strong>Responsive Column 1</strong> - This is the left column and the information should be contained in this column! </div> 
      </div> 
      </li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">WHAT WE DO<span class="caret"></span></a> 
      <div class="dropdown-menu row col-lg-12 three-column-navbar" role="menu"> 
       <div class="col-md-4"><strong>Responsive Column 1</strong> - This is the left column and the information should be contained in this column! </div> 
       <div class="col-md-4"><strong>Responsive Column 2</strong> - This is the center column and the information should be contained in this column!</div> 
       <div class="col-md-4"><strong>Responsive Column 2</strong> - This is the center column and the information should be contained in this column!</div> 
      </div> 
      </li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">OUR RESULTS<span class="caret"></span></a> 
      <div class="dropdown-menu row col-lg-12 one-column-navbar" role="menu"> 
       <div class="col-md-12"><strong>Responsive Column 1</strong> - This is the left column and the information should be contained in this column! </div> 
      </div> 
      </li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">NEWS</a> 
      </li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">LOCATIONS</a> 
      </li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">CONTACT</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</div> 

修订FIDDLE：比断点https://jsfiddle.net/f2rhjg0u/4/

Answer 1

最大宽度媒体查询应该总是1px的少。实例：

@media only screen and (max-width:767px){} 
@media only screen and (max-width:991px){} 
@media only screen and (max-width:1199px){} 

要改变垂直叠加，使用：

@media only screen and (max-width: 991px) { 
     .nav>li { 
      position:relative; 
      display:block; 
      float:none; 
     } 
    }