Bootstrap导航栏。当我按下按钮时，什么都没有发生 [英] Bootstrap Navbar. When I press the button nothing happens
本文介绍了Bootstrap导航栏。当我按下按钮时，什么都没有发生的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的导航栏有问题。当屏幕很小时会出现一个按钮，但是当我按下按钮时没有任何反应。
这是我的代码，我不知道为什么Navebar中的按钮没有做任何事情。
body {font-family：Verdana; // letter-spacing：1px;}＃header，h1 {// color：＃6f6f6f;颜色：#fff; font-size：24px;} container {margin-left：auto; margin-right：auto;}＃header {margin-top：50px; margin-left：auto; margin-right：auto;宽度：100％; height：200px; padding-top：10px;背景：rgb（26，84，155）;背景：-moz-线性梯度（45deg，rgba（26,84,155,1）0％，rgba（125,185,232,1）100％）;背景：-webkit-gradient（线性，左下，右上，停止颜色（0％，rgba（26,84,155,1）），停止颜色（100％，rgba（125,185,232,1 ）））;背景：-webkit线性梯度（45deg，rgba（26,84,155,1）0％，rgba（125,185,232,1）100％）;背景：-α-线性梯度（45°g，rgba（26,84,155,1）0％，rgba（125,185,232,1）100％）。背景：-ms-线性梯度（45deg，rgba（26,84,155,1）0％，rgba（125,185,232,1）100％）;背景：线性梯度（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;边框颜色：＃8ec6f7;填充：2.5em; border-radius：5px; text-align：justify;}。download {background-color：＃8ec6f7; border-radius：10px;宽度：100px;颜色：#fff;}。footer {margin-top：140px;宽度：100％; height：200px;背景：＃909090; float：bottom;}。footer，.foo {color：#fff;}
<！DOCTYPE HTML>< html>< head> <标题> TestPage< /标题> < link rel =stylesheettype =text / csshref =style.css> <！ - 最新编译和缩小的CSS - > < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css> <！ - 可选主题 - > < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css> <！ - 最新编译和缩小的JavaScript - > < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js> < /脚本> < meta charset =utf-8/> < link rel =icontype =image / pnghref =apple_logo.png/>< / head>< body> <！ - 导航栏 - > < nav class =navbar navbar-default navbar-fixed-top> < div class =container-fluid> < button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-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> < /按钮> < div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> < ul class =nav navbar-nav> < li class =active>< a href =index.html>主页< span class =sr-only>（current）< / span> < / A> < /锂> < li>< a href =about_us.html>关于我们< / a> < /锂> < li>< a href =downloads.html>下载< / a> < /锂> < / UL> < / DIV> < / DIV> < div class =navbar-header> < / DIV> < / NAV> <！ - 头 - > < div id =header> < div class =container> <中心]，[ < H1>Überschrift< / H1> < h3> unterüberschrift< / h3> < /中心]，[ < / DIV> < / DIV> <！ - 身体部位 - > < div class =container> < H2>新闻与LT; / H2> < HR /> < div class =line> < div class =col-xs-6 col-sm-3> < a href =＃class =thumbnail> < img src =ip_doesnt_exist.jpgalt =...> < / A> < / DIV> < h4>示例标题< / h4> < p class =text>jalösdjflkajglökadjflögkjaölkdfjölkjaölksjdföljölkasdjfölka< / p> <峰; br /> <峰; br /> < p为H.;< b取代; 1999年1月1日与LT; / B个< / p为H. <峰; 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.jpgalt =...> < / A> < / DIV> < h4>示例标题< / h4> < p class =text>jalösdjflkajglökadjflögkjaölkdfjölkjaölksjdföljölkasdjfölka< / p> <峰; br /> <峰; br /> < p为H.;< b取代; 1999年1月1日与LT; / B个< / p为H. <峰; 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.jpgalt =...> < / A> < / DIV> < h4>示例标题< / h4> < p class =text>jalösdjflkajglökadjflögkjaölkdfjölkjaölksjdföljölkasdjfölka< / p> <峰; br /> <峰; br /> < p为H.;< b取代; 1999年1月1日与LT; / B个< / p为H. <峰; 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.pngalt =脸谱> < p class =foo>在Facebook上关注我们< / p> < / A> < / DIV> < div class =col-sm-12 col-md-12> < a href =＃> < img src =google-plus-icon.pngalt =google +> < p class =foo>在Google+上关注我们< / p> < / A> < / DIV> < div class =col-sm-12 col-md-12> < / DIV> < / DIV> < / DIV> < / div>< / body>< / html>
h2_lin>解决方案
缺少的是对 jquery.js 的引用。我创建了 jsfiddle 来演示它。
请注意，您需要在 <之前引用 jquery.js / strong>引用 bootstrap.js
您的 html头应该看起来像：
<！ - 最新的编译和缩小的JavaScript - >
< 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> < /脚本>
希望这可以工作
I have a problem with my navbar. When the screen is small a Button appear, but when I press the button nothing happens.
This is my code and i don't really know why the button in the Navebar doesn't do anything.
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;
}
<!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>
解决方案
What is missing is a reference to jquery.js. I created jsfiddle to demonstrate it.
Please note that you need to reference jquery.js before referecing bootstrap.js
Your html head should look like:
<!-- Latest compiled and minified JavaScript -->
<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>
Hope this works
这篇关于Bootstrap导航栏。当我按下按钮时，什么都没有发生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
