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

Bootstrap：以768像素的屏幕大小折叠导航

1 个答案: