Bootstrap：在屏幕尺寸为 768 像素时折叠导航

Question

我正在使用 bootstrap，但遗憾的是导航项仅在智能手机上折叠，我怎样才能让它在平板电脑纵向模式下折叠？ (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

它基于像素。您需要做的是使用媒体查询来检测您希望导航折叠的点，然后找到折叠它的 class 并将其复制到媒体查询中。这个人解释得很好并且有一个 link 3.1

的示例代码

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

Bootstrap：在屏幕尺寸为 768 像素时折叠导航

Bootstrap: Collapse nav at 768 px of screen size

responsive-design

twitter-bootstrap