如何使导航栏响应

时间:2014-05-21 15:09:06

标签: responsive-design twitter-bootstrap-3 navbar

我认为它没有响应,因为我添加了navbar-fixed-top而不是bootstrap使用的,这是navbar navbar-default。在导航栏修复后,您知道如何使其响应吗?

<nav class="navbar navbar-fixed-top" role="navigation"> 

1 个答案:

答案 0 :(得分:0)

这对我有用 这是一个它应该是什么样子的例子。

 <head>
 <link href="styles/bootstrap.css" rel="stylesheet"> 
 <script src="js/bootstrap.js"></script>
 </head>

       <div class="navbar navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <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="#"><img src="assets/images/logo.png" alt="">  </a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Book</a></li>
           <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-align-justify"></span> Table of Contents</a>
            <ul class="dropdown-menu">
              <li><a href="#">content 1</a></li>
              <li><a href="#">content 2</a></li>
              <li><a href="#">content 3</a></li>

            </ul>
          </li>
        </ul>

      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </div>

您还可以在引导网站上看到许多工作导航栏的示例

Bootstrap examples