Bootstrap导航栏切换按钮不起作用
问题描述:
当页面缩小到平板电脑/手机大小时,显示切换按钮,但不起作用。下面是HTMLBootstrap导航栏切换按钮不起作用
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
....
....
<script type="text/javascript" href="https://code.jquery.com/jquery-2.2.1.js"></script>
<script type="text/javascript" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
必要的JavaScript链接。
答
所以我找到了问题;这是非常轻微的。 href属性应该替换为脚本标签上的src属性。崇高文本的选项卡按脚本默认为href。
答
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: right;
left: -300px;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 8px;
padding: 9px 10px;
position: relative;
}
body{
width: 400px !important;
}
<link href="http://freelancezonebd.com/sb-web/3/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
\t \t <div class="container">
\t \t \t <div class="navbar-header">
\t \t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
\t \t \t \t \t <span class="sr-only">Toggle navigation</span>
\t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t </button>
\t \t \t \t <a href="#" class="navbar-brand"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a>
\t \t \t </div>
\t \t \t <div class="collapse navbar-collapse" id="bs-nav-demo">
\t \t \t \t <ul class="nav navbar-nav">
\t \t \t \t \t <li><a href="#">About</a></li>
\t \t \t \t \t <li><a href="#">Contact</a></li>
\t \t \t \t </ul>
\t \t \t \t <ul class="nav navbar-nav navbar-right">
\t \t \t \t \t <li><a href="#">Sign Up</a></li>
\t \t \t \t \t <li><a href="#">Login</a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
\t </nav>
....
....
\t <script src="https://code.jquery.com/jquery-2.2.1.js"></script>
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
答
呼叫bootstrap.css为好。这里我只是从我的本地文件中调用它
<link href="http://freelancezonebd.com/sb-web/3/css/bootstrap.css" rel="stylesheet"/>
您可以从CDN调用它。也可以调用js文件使用“src”而不是“href”。谢谢。
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: right;
left: -300px;
}
<link href="http://freelancezonebd.com/sb-web/3/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
\t \t <div class="container">
\t \t \t <div class="navbar-header">
\t \t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
\t \t \t \t \t <span class="sr-only">Toggle navigation</span>
\t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t \t <span class="icon-bar"></span>
\t \t \t \t </button>
\t \t \t \t <a href="#" class="navbar-brand"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a>
\t \t \t </div>
\t \t \t <div class="collapse navbar-collapse" id="bs-nav-demo">
\t \t \t \t <ul class="nav navbar-nav">
\t \t \t \t \t <li><a href="#">About</a></li>
\t \t \t \t \t <li><a href="#">Contact</a></li>
\t \t \t \t </ul>
\t \t \t \t <ul class="nav navbar-nav navbar-right">
\t \t \t \t \t <li><a href="#">Sign Up</a></li>
\t \t \t \t \t <li><a href="#">Login</a></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
\t </nav>
....
....
\t <script src="https://code.jquery.com/jquery-2.2.1.js"></script>
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>