Question

Bootstrap .navbar不会崩溃。它是响应。当我在小型设备中看到这个编码的网站时。然后它做的是它使导航栏小广告垂直，但它不会崩溃每个页面只是停留在屏幕上。我试着在网上搜索，但他们的代码与这个代码差别不大。请检查并告诉我哪里弄错了。非常感谢你。

<header>
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="index.html"><img src="img/logo.png" class="logo" alt="Tweakwebs | Web Design And Development" /></a>
            </div>
            <div>
              <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                <li><a href="#service">Service</a></li>
                <li><a href="#pricing">Pricing</a></li> 
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="#disclaimers">Disclaimers</a></li> 
              </ul>
            </div>
              <div class="nav navbar-btn navbar-right">
                <button class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Login</button>
                <button class="signupbtn btn btn-primary"><span class="glyphicon glyphicon-pencil"></span> Signup</button>
              </div>
          </div>

        </nav>
    </div><!-- end of container -->
</header>

Answer 1

您遗漏了一些内容：collapse和navbar-toggle。见例。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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" href="index.html">
            <img src="img/logo.png" class="logo" alt="Tweakwebs | Web Design And Development" />
          </a>

        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a>

            </li>
            <li><a href="#service">Service</a>

            </li>
            <li><a href="#pricing">Pricing</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
            <li><a href="#disclaimers">Disclaimers</a>

            </li>
          </ul>
        </div>
        <div class="nav navbar-btn navbar-right">
          <button class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Login</button>
          <button class="signupbtn btn btn-primary"><span class="glyphicon glyphicon-pencil"></span> Signup</button>
        </div>
      </div>
    </nav>
  </div>
  <!-- end of container -->
</header>

Bootstrap导航栏不会在小屏幕设备上崩溃

1 个答案: