Question

我的导航栏出了问题。当屏幕很小时会出现一个按钮，但是当我按下按钮时没有任何反应。

这是我的代码，我真的不知道为什么Navebar中的按钮没有做任何事情。

＆＃13;

body {
  font-family: Verdana;
  // letter-spacing: 1px;
}
#header,
h1 {
  // color: #6f6f6f;
  color: #fff;
  font-size: 24px;
}
container {
  margin-left: auto;
  margin-right: auto;
}
#header {
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 200px;
  padding-top: 10px;
  background: rgb(26, 84, 155);
  background: -moz-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(26, 84, 155, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
  background: -webkit-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
  background: -o-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
  background: -ms-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
  background: linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a549b', endColorstr='#7db9e8', GradientType=1);
}
table {
  float: left;
}
.beschreibung {
  width: 100%;
  float: left;
}
.text {
  float: left;
}
.person {
  float: left;
  margin-top: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #8ec6f7;
  padding: 2.5em;
  border-radius: 5px;
  text-align: justify;
}
.download {
  background-color: #8ec6f7;
  border-radius: 10px;
  width: 100px;
  color: #fff;
}
.footer {
  margin-top: 140px;
  width: 100%;
  height: 200px;
  background: #909090;
  float: bottom;
}
.footer,
.foo {
  color: #fff;
}

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
  <title>TestPage</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
  </script>
  <meta charset="utf-8" />
  <link rel="icon" type="image/png" href="apple_logo.png" />
</head>

<body>
  <!--nav bar-->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span>							</a>
          </li>
          <li><a href="about_us.html">About us</a>
          </li>
          <li><a href="downloads.html">Downloads</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="navbar-header">

    </div>
  </nav>

  <!--header-->
  <div id="header">
    <div class="container">
      <center>
        <h1>Überschrift</h1>
        <h3>unter überschrift</h3>
      </center>
    </div>
  </div>

  <!-- body-part -->
  <div class="container">
    <h2>News</h2>
    <hr/>
    <div class="line">
      <div class="col-xs-6 col-sm-3">
        <a href="#" class="thumbnail">
          <img src="ip_doesnt_exist.jpg" alt="...">
        </a>
      </div>
      <h4>Example heading</h4>
      <p class="text">jalösdjflkajglökadjflögkjaölkdfjölk jaölksjdföl jölkasdjfölka</p>
      <br/>
      <br/>
      <p><b>1.1.1999</b>
      </p>
      <br/>
      <br/>
      <br/>

      <hr/>


    </div>
    <div class="line">
      <div class="col-xs-6 col-sm-3">
        <a href="#" class="thumbnail">
          <img src="ip_doesnt_exist.jpg" alt="...">
        </a>
      </div>
      <h4>Example heading</h4>
      <p class="text">jalösdjflkajglökadjflögkjaölkdfjölk jaölksjdföl jölkasdjfölka</p>
      <br/>
      <br/>
      <p><b>1.1.1999</b>
      </p>
      <br/>
      <br/>
      <br/>
      <br/>

      <hr/>
    </div>

    <div class="line">
      <div class="col-xs-6 col-sm-3">
        <a href="#" class="thumbnail">
          <img src="ip_doesnt_exist.jpg" alt="...">
        </a>
      </div>
      <h4>Example heading</h4>
      <p class="text">jalösdjflkajglökadjflögkjaölkdfjölk jaölksjdföl jölkasdjfölka</p>
      <br/>
      <br/>
      <p><b>1.1.1999</b>
      </p>
      <br/>
      <br/>
      <br/>

      <hr/>
    </div>
  </div>
  
  <div class="footer">
    <div class="container">
      <br/>
      <div class="row">
        <div class="col-sm-12 col-md-12">
          <a href="#">
            <img src="facebook-icon.png" alt="facebook">
            <p class="foo">Followe us on Facebook</p>
          </a>
        </div>
        <div class="col-sm-12 col-md-12">
          <a href="#">
            <img src="google-plus-icon.png" alt="google+">
            <p class="foo">Followe us on Google +</p>
          </a>
        </div>
        <div class="col-sm-12 col-md-12">

        </div>
      </div>
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 1

缺少的是对jquery.js的引用。我创建了jsfiddle来演示它。

请注意，您需要在参考jquery.js之前引用bootstrap.js

您的html head应如下：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>

希望这有效

Answer 2

您是否包含了所有必要的JavaScript？检查是否包含bootstrap的JavaScript文件，或者只需下载Bootstrap的collapse.js

Bootstrap Navbar。当我按下按钮时没有任何反应

2 个答案: