Bootstrap 3 Navbar切换 - 折叠但按钮不出现

Question

我不知道我在做什么错在这里，但我希望这是一个可悲的愚蠢的东西。

我在Umbraco 6.0.5中使用Bootstrap 3，我无法获得切换到调整大小 - 在770px宽度以下导航崩溃，但没有按钮切换它，或者有些东西在那里，如所见在代码和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 &#39;reeches&#39; 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="">&#39;reeching&#39; 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），以＃主导航和ID到主导航，没有喜悦。 我试着在按钮> 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> 

Answer 1

，并更改<nav class="navbar">到<nav class="navbar navbar-default">

Answer 2

在您的第一线

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> 

它应该是data-target="#nav-collapse"因为你有<div class="collapse navbar-collapse" id="nav-collapse">其中id是nav-collapse

Answer 3

这应该让你在指出正确的方向。它看起来像你的主要问题是你的按钮data-target属性引用了一个类而不是一个ID。在这种情况下最好使用一个ID，所以如果你在代码中的其他地方调用这个类，那么你不会在javascript中抛出曲线球。

我还看到你有几个空白的<li class="dropdown"></li>。我不确定这是否是有意的，但我会参考我所附的结构。

希望这对你有用，祝你好运！

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <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> 
     <a class="navbar-brand" href="#">Reech</a> </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="main-nav"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">What is reech? <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="/what-is-reech/about-this-site-aspx">About this site</a></li> 
      </ul> 
     </li><!-- dropdown --> 
     <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="/technologies.apsx">Technologies</a></li> 
      <li><a href="/complementary-activities.apsx">Complementary Activities</a></li> 
      </ul> 
     </li><!-- dropdown --> 
     <li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="/technologies.apsx">Technologies</a></li> 
      </ul> 
     </li><!-- dropdown --> 
     </ul><!-- nav navbar-nav --> 
    </div><!-- collapse navbar-collapse --> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

Answer 4

引导 - 切换按钮将不会在移动视图显示

FIX：bootstrap.min： 在做这些改变。CSS

这修正了切换按钮的外边框

.navbar-toggle 
{ 
    position:relative; 
    float:right; 
    padding:9px 10px; 
    margin-top:8px; 
    margin-right:15px; 
    margin-bottom:8px; 
    background-color:transparent; 
    background-image:none; 
    border-radius:4px 
} 

添加

​​

（改变颜色代码以匹配您的设计）

.navbar-toggle 
{ 
    position:relative; 
    float:right; 
    padding:9px 10px; 
    margin-top:8px; 
    margin-right:15px; 
    margin-bottom:8px; 
    background-color:transparent; 
    background-image:none; 
    border:1px solid #444;   /* added line */ 
    border-radius:4px 
} 

这修复水平线的切换按钮

.icon-bar 
{ 
    display:block; 
    width:22px; 
    height:2px; 
    border-radius:1px; 
} 

添加

​​

（改变颜色代码以匹配您的设计）

.icon-bar 
{ 
    display:block; 
    width:22px; 
    height:2px; 
    border-radius:1px; 
    border:1px solid #444; 
}