Question

我目前正在尝试学习Bootstrap，但我遇到了一个问题。当导航栏位于移动视图中时，导航栏不会显示其应有的项目。

首先她是我的代码：

<!DOCTYPE html>
        <html>
            <head>
                <title>Test Bootstrap!</title>
                <meta name='viewport' content='width=device-width, initial-scal=1.0'>
                <link href='css/bootstrap.min.css' rel='stylesheet'>
                <link href='css/styles.css' rel='stylesheet'>
            </head>

            <body>
               <div class='navbar navbar-inverse navbar-static-top' role='navigation'>
                    <div class='container'>

                        <a href= '#' class='navbar-brand'>BootstrapTest</a>

                        <button class='navbar-toggle' data-toggle='collapse' data-target='.navHeaderCollapse'>
                            <span class='icon-bar'></span>
                            <span class='icon-bar'></span>
                            <span class='icon-bar'></span>
                        </button>


                        <div class='collapse navbar-collapse navHeaderCollapse'>
                            <ul class='nav navbar-nav navbar-right'>
                                <li class='active'><a href='#'>Home</a></li>
                                <li><a href='#'>Something</a></li>
                            </ul>
                        </div>

                    </div>
                </div>

                <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
                <script src='js/bootstrap.js'></script>
            </body>
        </html>

以下是按下切换按钮时的外观： enter image description here

我真的无法弄清楚我做错了什么，所以我希望别人能发现问题。

非常感谢任何帮助

Answer 1

您缺少的是navbar-header元素：

<body>
  <div class='navbar navbar-inverse navbar-static-top' role='navigation'>
    <div class='container'>
      <div class="navbar-header">
        <a href= '#' class='navbar-brand'>BootstrapTest</a>
        <button class='navbar-toggle' data-toggle='collapse' data-target='.navHeaderCollapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </button>
      </div>
     ...

Bootstrap（就像我们第一次尝试时的新功能一样）可能有点令人困惑。尝试花一点时间阅读他们的网站，并特别注意他们的examples section，你总能看到他们如何做事，并将代码示例作为第一指导。

这样不仅可以让您熟悉框架，还可以熟悉一些基本的＆＃34;最佳实践＆＃34;。

Answer 2

除了添加navbar-header之外，您还需要在navbar标题类之外移动navbar-collapse类。这是一个工作版本。（仅供参考：我还将脚本链接移动到标题中。）

<!DOCTYPE html>
<html>
    <head>
        <title>Test Bootstrap!</title>
        <meta name='viewport' content='width=device-width, initial-scal=1.0'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>

    <body>
      <div class='navbar navbar-inverse navbar-static-top' role='navigation'>
          <div class='container'>
            <div class="navbar-header">
              <a href= '#' class='navbar-brand'>BootstrapTest</a>

              <button class='navbar-toggle' data-toggle='collapse' data-target='.navHeaderCollapse'>
                  <span class='icon-bar'></span>
                  <span class='icon-bar'></span>
                  <span class='icon-bar'></span>
              </button>

            </div>

            <div class='collapse navbar-collapse navHeaderCollapse'>
                <ul class='nav navbar-nav navbar-right'>
                    <li class='active'><a href='#'>Home</a></li>
                    <li><a href='#'>Something</a></li>
                </ul>
            </div>

          </div>
      </div>
</body>
</html>

Bootstrap导航栏未正确显示项目

2 个答案: