Jquery 引导切换按钮不工作
我有以下html:Jquery 引导切换按钮不工作,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我有以下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="
<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>
切换导航
在320x480、480x800、640x960上,一切正常。但是当宽度变大时,比如说768,按钮停止工作
css和html代码:
知道为什么会这样吗
即使我尝试使用768x1280分辨率的示例,切换按钮也会出现,但当您单击它时,它不起作用。查看bootstrap.css让我了解到:
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
我认为css和js文件中还有其他一些关于.navbar切换的参考,使得它只能在宽度小于768的浏览器中工作
我刚刚尝试用navbar使用官方网站上的整个页面,这似乎有点奇怪,我只能看到切换按钮的宽度是767px,而不是768px。您提供的JSFIDLE没有重现您所解释的行为。你应该纠正它。当然可以。这是因为切换按钮仅适用于低于767px的移动视图。但正如topic starter所述:“…例如,从768x1280分辨率的引导网站上,切换按钮会出现,但当您单击它时,它不起作用”。所以我觉得这很奇怪。他为什么看到它?即使css说他看不到,他怎么能看到呢?问题是在我的css中,导航栏不应该打开该分辨率。因此,如果问题解决了,你可以编辑你的答案,并以某种方式将你的问题标记为已解决。