Twitter bootstrap 复制和粘贴导航栏[或基本上任何东西]不工作的引导[3.3.7]代码_Twitter Bootstrap_Twitter Bootstrap 3

Twitter bootstrap 复制和粘贴导航栏[或基本上任何东西]不工作的引导[3.3.7]代码

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 复制和粘贴导航栏[或基本上任何东西]不工作的引导[3.3.7]代码,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,所以我一直在尝试编写我的第一个小网站，但遇到了一个问题。我一直在尝试手动编写导航栏代码，但引导似乎是一个更好、更快的解决方案，尽管复制和粘贴对我不起作用。jQuery首先似乎是一个常见的问题，但我有这个问题，它仍然不起作用。我真的不知道我做错了什么，尽管我的知识在这一点上是有限的。以下导航栏的完整代码和输出图像+所需外观： <!DOCTYPE html> <html lang="en"> <head> <meta c

所以我一直在尝试编写我的第一个小网站，但遇到了一个问题。我一直在尝试手动编写导航栏代码，但引导似乎是一个更好、更快的解决方案，尽管复制和粘贴对我不起作用。jQuery首先似乎是一个常见的问题，但我有这个问题，它仍然不起作用。我真的不知道我做错了什么，尽管我的知识在这一点上是有限的。以下导航栏的完整代码和输出图像+所需外观：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>
    <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.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      </head>
      <body>
        <h1>Hello, world!</h1>
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Navbar</a>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
              </form>
            </div>
          </nav>
      </body>
    </html>


引导101模板
你好，世界！








搜寻

我在Chrome 60.0.3112.90中的输出：

导航栏所需的输出：

您需要首先链接CSS文件，然后再链接js文件。在jQuery之后首先链接CSS，然后是引导js文件

 <link         href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <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.7/js/bootstrap.min.js"></script>

这是Bootstrap v4而不是v3，

btn outline success

和

my-2 my-sm-0

这些都是在Bootstrap v4中添加的，所以请转到这里查看它们的示例/文档


你好，世界！








搜寻

试试看，让我知道，可能还有其他问题……但是在链接文件时，我们先链接CSS，然后再链接JS。他们看一下这个，因为你想要一个导航栏，所以：你的解决方案非常有效！你基本上是从v4转换到v3的引导吗？我可以看到您更改了很多代码，但我真的不明白为什么现在可以这样做。因为您使用的是旧格式…它在最新版本中不受支持…我想是的…您可以查看getbootstrap.com文档并尝试使用jsbin（这只是一个建议，因为您是新手）…只需使用文档并将其正确链接，一切都会好起来的…这非常有效。虽然这似乎是引导式v4，根据他们的网站“放弃了IE8、IE9和iOS 6支持。v4现在只有IE10+和iOS 7+。对于需要这两种支持的网站，请使用v3。”因为我想要更多的兼容性，我想保留v3。由于v4是alpha版本，我相信他们网站上的所有代码都应该与v4兼容，不是吗？我如何在v3中使用它？@JoãoRamos

btn概述成功my-2 my-sm-0

这些都是v4，所以是的，它是BSv4@Ashishsah的解决方案非常有效，尽管我不太明白它是如何实现的。有没有一种简单的方法可以查看某个东西是否是v4特定的，这样我就可以理解在复制它时什么可以工作，什么不能工作？如中所示，搜索与v3兼容的导航栏。@JoãoRamos他刚刚复制了v3示例给您，当然，它会起作用。您发布的代码是v4，我想我混淆了bootstrap v4和v3的下载。好像我浪费了你的时间。很抱歉，但是谢谢你的帮助。它结束了失去的时间。我应该/可以删除此帖子吗？