Question

我完全无助，不知道到底出了什么问题。我在开发者控制台中包含了所有js和css文件没有错误。请帮帮我。当我没有按下按钮时，Bootstrap导航栏不会扩展。

<!doctype html>
<html>
<head>

    <title>Twitter Bootstrap</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">


    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">
    .box{
            background-color:green;
            border:1px grey solid;
        }
    </style>    

</head>

<body>

<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a href="" class="navbar-brand">My website</a>
                <button type="button" class="navbar-toggle" datatoggle="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>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="">Details</li></a>
                <li><a href="">About Us</li></a>
            </ul>
        </div>
    </div>
</div>
<h1>Hellow World!</h1>

<div class="container">
    <div class="row">
        <div class="col-md-6 box">Content</div>
        <div class="col-md-6 box">Content</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.1/js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

检查您的代码：

<ul class="nav navbar-nav">
  <li><a href="">Details</li></a>
  <li><a href="">About Us</li></a>
</ul>

应该是：

<ul class="nav navbar-nav">
  <li><a href="">Details</a></li>
  <li><a href="">About Us</a></li>
</ul>

Bootply of Working Example

关于我能想到的其他事情，请确保您的<head>和<body>正确完成。它们不在我的例子中，并且它有效，所以可能有一些问题。

Answer 2

您的数据切换拼写错误。你忘了写 - （连字号）介于两者之间。

Answer 3

您的代码似乎按预期工作了吗？看着： http://jsfiddle.net/u2496yq2/

<div class="container">
<div class="row">
    <div class="col-md-6 box">Content</div>
    <div class="col-md-6 box">Content</div>
</div>
</div>

以上更新。您的问题是折叠按钮的数据切换。您需要像这样修改：data-toggle

虽然包含了所有js和css源文件，但Bootstrap导航栏不会扩展

3 个答案: