Question

我刚刚关注了导航栏上的tutsplus课程（https://webdesign.tutsplus.com/courses/bootstrap-3-for-web-design/lessons/the-navbar）。据我所知，我的代码与他的代码几乎相同，但我有一些问题。如果我尝试使用该元素创建一个按钮，则后面的任何内容都会被推送到新行。

    <div class="navbar navbar-default" role="navigation">
    <div class="container">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand</a>
      </div>

      <div class="collapse navbar-collapse" id="example-nav">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
        </ul>

        <a href="#" class="btn btn-default navbar-btn">This is a button</a>

        <p class="navbar-text">Hello!</p>

        <form action="" class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
        </form>
      </div>  

    </div>
  </div>

此外，当我点击顶部的导航栏切换按钮时，没有任何反应，因为它应该显示导航栏上的所有项目。

我一直试图弄清楚如何解决它几个小时，并且无法提出解决方案。有些人说你不应该在导航栏中使用一个元素，但教练会这样做，而且对他来说效果很好。

我真的在这里挣扎，任何人都可以解决这个问题吗？

Answer 1

我实际上认为我现在已经弄明白了，但我会把它留在这里，以便其他人可以从我的错误中吸取教训。据我所知，问题不在代码中，我只是没有将我的html链接到jQuery，或者是bootstrap javascript（我对它都很新）。

所以我添加了

    <script src="../../../jquery/jquery.min.js"></script>

在我的head元素（我下载的jquery的链接，你也可以链接到在线版本）和

    <script src="../../../bootstrap/js/bootstrap.min.js"></script>

到我的身体，就在结束标签之前（再次，这是我下载的副本，使用您自己的，或在线版本）。现在一切都按照我希望的那样运行。

navstrap的navbar-btn和navbar-toggle问题

1 个答案: