Question

我正在使用Bootstrap 3创建一个Navbar，当我输入ul标签并添加一个列表项时，它不会显示出来。我已经尝试将它包装在带有容器类的div中，但这并不起作用。

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8">
<title>Bootstrap Course</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="logo.png"></a>
      <div class="nav-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="row">

</div>

    <script     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"     integrity="sha384-    0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"     crossorigin="anonymous"></script>
    <script src="scripts.js"></script>
  </body>

</html>

Answer 1

请使用bootstrap documentation中列出的navbar代码。

您需要将class="nav-collapse collapse navbar-responsive-collapse">替换为class="collapse navbar-collapse"

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="logo.png">
      </a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>

Answer 2

看起来你错过了JQuery。将其添加到引导程序JS

之上

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

以下是codepen http://codepen.io/anon/pen/zBRLZo

的示例

Answer 3

首先在css文件中使用border来找到页面中导航栏位置的位置，如下所示..

div class =＆＃34; navbar navbar-default navbar-fixed-top＆＃34; style =＆＃34; border：2px solid＃000000＆＃34;＆gt;

这将指导你..

希望有所帮助......

Bootstrap Navbar未显示无序列表

3 个答案: