Bootstrap 切换按钮不起作用
[英] Bootstrap toggle button does not work
本文介绍了Bootstrap 切换按钮不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下 html:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ><div class="container-fluid" ng-controller="NaviController"><div class="row main-navi 大写 navilinks" ><div class="col-md-1 col-md-offset-1 col-xs-3 "><div id="标识容器"><a href="#"><img id="logo" src="assets/images/logo.svg"></a>
<div class="col-md-1 col-xs-2 col-xs-offset-7"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#epic-navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
<div class="col-md-6 col-md-offset-1 col-xs-offset-8 col-xs-4 navbar-collapse mainlinks" id="epic-navbar-collapse"><ul id="mainlinks-container" ><li class="white-shadow mainlink" ><a href="#about" data-target="about" id="about" ng-click="CollapseNavilinks()">关于</a><li class="mainlink"><a href="#values" data-target="values" id="values" ng-click="CollapseNavilinks()">值</a></里><li class="mainlink"><a href="#team" data-target="team" id="team" ng-click="CollapseNavilinks()">团队</a></里><li class="mainlink"><a href="#portofolio" data-target="portfolio" id="portofolio" ng-click="CollapseNavilinks()">投资组合</a></里><li class="mainlink"><a href="#join" data-target="join" id="join" ng-click="CollapseNavilinks()">Join</a></里><li class="mainlink"><a href="#contact" data-target="contact" id="contact" ng-click="CollapseNavilinks()">联系方式</a></里>
</nav>
在 320x480、480x800、640x960 上一切正常.但是当宽度变大时，可以说 768 按钮停止工作.
css 和 html 代码:http://jsfiddle.net/#&togetherjs=iqyQopTpQT
知道为什么会这样吗?
即使我在 768x1280 分辨率下尝试 bootstrap website 中的示例，切换按钮也会出现，但是当您点击它，它不起作用.
解决方案
查看 bootstrap.css 让我得到了这个:
@media(最小宽度:768px){.navbar-toggle {显示:无；}}
我认为 .navbar-toggle 在 css 和 js 文件中还有一些其他引用，使其只能在宽度小于等于的浏览器中工作.768.
我刚刚尝试使用带有导航栏的官方网站的整个页面，这似乎有点奇怪，我只能看到浏览器宽度为 767 像素的切换按钮，而不是 768 像素.
I have the following html:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<div class="container-fluid" ng-controller="NaviController">
<div class="row main-navi uppercase navilinks" >
<div class="col-md-1 col-md-offset-1 col-xs-3 ">
<div id="logo-container">
<a href="#"><img id="logo" src="assets/images/logo.svg"> </a>
</div>
</div>
<div class="col-md-1 col-xs-2 col-xs-offset-7">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#epic-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>
<div class="col-md-6 col-md-offset-1 col-xs-offset-8 col-xs-4 navbar-collapse mainlinks" id="epic-navbar-collapse">
<ul id="mainlinks-container" >
<li class="white-shadow mainlink" ><a href="#about" data-target="about" id="about" ng-click="CollapseNavilinks()">About</a></li>
<li class="mainlink"><a href="#values" data-target="values" id="values" ng-click="CollapseNavilinks()">Values</a></li>
<li class="mainlink"><a href="#team" data-target="team" id="team" ng-click="CollapseNavilinks()">Team</a></li>
<li class="mainlink"><a href="#portofolio" data-target="portfolio" id="portofolio" ng-click="CollapseNavilinks()">Portfolio</a></li>
<li class="mainlink"><a href="#join" data-target="join" id="join" ng-click="CollapseNavilinks()">Join</a></li>
<li class="mainlink"><a href="#contact" data-target="contact" id="contact" ng-click="CollapseNavilinks()">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
On 320x480, 480x800, 640x960 everything works fine. But when the width becames bigger lets say 768 the button stops working.
css and html code: http://jsfiddle.net/#&togetherjs=iqyQopTpQT
Any idea why this is happening?
Even if I try the example from bootstrap website on 768x1280 resolution the toggle button appears but when you click it, it doesn't work.
解决方案
Looking to the bootstrap.css got me this:
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
I think there are some other references for .navbar-toggle in css and js files that make it only working in browser with width < 768.
I've just tried to use the whole page from official web-site with navbar, and, that seems little bit strange, i can see the toggle button only with 767px as browser's width, not 768px.
这篇关于Bootstrap 切换按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
