Question

我刚刚下载了最新版本的Bootstrap，我编写的代码文件看起来根本不起作用。请帮我看看我做错了什么或者Bootstrap在网上上传了废话文件。

以下代码未显示导航栏。我发现崩溃类给出了display：none;当我调整浏览器大小时，导航会出现点击按钮，但它太丑了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Static Top Navbar Example for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Custom styles for this template -->

</head>

<body>

<!-- Static navbar -->
<div class="navbar navbar-static-top">
  <div class="container">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
    <div class="nav-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="nav-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav pull-right">
        <li><a href="/examples/navbar/">Default</a></li>
        <li class="active"><a href="/examples/navbar-static-top/">Static top</a></li>
        <li><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>


<div class="container">

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Navbar example</h1>
    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>
      <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
    </p>
  </div>

</div> <!-- /container -->
    <script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/scripts.js"></script>
   </body>
    </html>

Answer 1

如果你check the release notes for RC2：

导航栏：



彻底检查导航栏，始终保持响应和移动。   导航栏现在需要.navbar-header 来整理品牌和切换。



.nav-collapse已重命名为.navbar-collapse 并自动点击最大高度并会溢出以使您的导航内容保持在同一视口中。   详见＃9403。


Navbar的不再使用.pull-left或.pull-right，而是.navbar-left和.navbar-right。这可以避免由于链接类和使样式更容易。

Bootstrap 3 RC2有什么问题

1 个答案: