Bootstrap：在768像素的屏幕尺寸下摺疊導航

Question

我使用引導程序，但令人遺憾的是導航項僅合併爲智能手機，我如何才能使它在縱向模式下崩潰？ （768px）

我的導航項目：

<nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
      <a class="navbar-brand" href="#"><img src="images/logo.png" width="383" height="150" alt="Logo" /></a> 
      <li class="active"><a href="#home">Accueil</a></li> 
      <li><a href="#service">Le Service</a></li> 
      <li><a href="#portfolio">Notre r&Eacute;seau</a></li> 
      <li><a href="#about">Qui sommes nous?</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <form id="login"> 
        <li><input class="form_login" type="text" id="email" placeholder="e-mail" /></li> 
        <li><input class="form_login" type="password" id="password" placeholder="mot de passe" /></li> 
        <li><button class="form_login" id="submit" value="submit">Submit</button></li> 
       </form> 
       <li><a href="#" style="color: white;">Mot de passe oublié?</a></li> 
       <li><a href="#" style="color: white;">Créer un compte</a></li> 
       <li><a href="#"><span class="icon-facebook"></span></a></li> 
       <li><a href="#"><span class="twitter-square"></span></a></li> 
       <li><a href="#"><span class="google-plus"></span></a></li> 
       </ul> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

Answer 1

它是基於像素。你需要做的是使用媒體查詢來檢測你想讓導航崩潰的點，然後找到摺疊它並將其複製到媒體查詢中的類。這傢伙解釋得很好，並且有一個鏈接到示例代碼爲3.1

https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint