【发布时间】：2014-03-11 03:12:38
【问题描述】：
我不知道我在这里做错了什么，但我认为这是非常愚蠢的事情。
我在 Umbraco 6.0.5 中使用 Bootstrap 3，我无法让切换器工作在缩小 - 低于 770 像素宽度时，导航会崩溃，但没有按钮可以切换它，或者说有什么东西，如中所示代码和 Firebug，但在 Chrome 和 Firefox 中不可见（没有尝试过 IE）。
有一个fiddle 和下面的代码。我在小提琴中使用http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js、http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js 和http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css。
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href"#">reech</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li><a href="/" class="selected">Home</a></li>
<li class=" dropdown">
<a href="/what-is-reech.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">What is reech? <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/what-is-reech/about-this-site.aspx" rel="">About this site</a></li>
</ul>
</li>
<li class=" dropdown">
</li>
<li><a href="/key-reech-projects.aspx" class="" rel="">Key reech projects</a></li>
<li class=" dropdown">
</li>
<li><a href="/technologies.aspx" class="" rel="">Technologies</a></li>
<li class=" dropdown">
</li>
<li><a href="/complementary-activities.aspx" class="" rel="">Complementary Activities</a></li>
<li class=" dropdown">
<a href="/news.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">News <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/news/merseyside-collective-switching-scheme-launched.aspx" rel="">Merseyside collective switching scheme launched</a></li>
<li><a href="/news/reech-scoops-top-award.aspx" rel="">reech scoops top award</a></li>
<li><a href="/news/reech-award-nomination.aspx" rel="">reech award nomination</a></li>
<li><a href="/news/green-deal-and-energy-company-obligation-(eco)-september-2013-statistics.aspx" rel="">Green Deal and Energy Company Obligation (ECO) September 2013 Statistics</a></li>
<li><a href="/news/energy-switching-scheme.aspx" rel="">Energy Switching Scheme</a></li>
<li><a href="/news/project-reeches-new-milestone.aspx" rel="">Project 'reeches' new milestone</a></li>
<li><a href="/news/firms-sign-up-for-new-opportunities.aspx" rel="">Firms sign up for new opportunities</a></li>
<li><a href="/news/14-new-jobs-created-for-merseyside-residents.aspx" rel="">14 new jobs created for Merseyside residents</a></li>
<li><a href="/news/reeching-out-to-low-carbon-and-green-energy-sector.aspx" rel="">'reeching' out to Low Carbon and Green Energy Sector</a></li>
</ul>
</li>
<li class=" dropdown">
</li>
<li><a href="/reech-into-business.aspx" class="" rel="">reech into business</a></li>
<li class=" dropdown">
<a href="/reech-partners.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">reech partners <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/reech-partners/reech-steering-group.aspx" rel="">reech Steering Group</a></li>
</ul>
</li>
</ul>
</div><!--close navbar-collapse-->
</div><!--close container-->
</nav><!--Close nav-->
更新 - 所以，我尝试将数据目标（并已将fiddle）更改为#main-nav，并将 id 更改为 main-nav，不高兴。 我尝试在 button > span 元素中放置一个破折号，它可以工作。也就是说，破折号显示，我可以切换菜单。但是图标栏在哪里？
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
</button>
【问题讨论】：
标签： javascript jquery html css twitter-bootstrap