Javascript 引导3导航栏切换-折叠，但按钮不出现

我不知道我做错了什么，但我想这是一件非常愚蠢的事情

我在使用Umbraco 6.0.5中的Bootstrap 3，我无法使用切换来调整向下的大小-低于770px的宽度，导航会折叠，但没有按钮来切换，或者更确切地说，有一些东西，如代码和Firebug中所示，但在Chrome和Firefox中不可见（没有尝试IE）

下面有一个和代码。我在用小提琴

<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-->

切换导航

更新-所以，我尝试将数据目标（并已将）更改为#主导航，将id更改为主导航，没有乐趣。 我试着在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>

切换导航
-
-
-

在您的第一行中

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

---

它应该是

data target=“#nav collapse”

，因为您有

，其中id是

nav collapse

，并将

更改为

，这将使您指向正确的方向。看起来你的主要问题是你的按钮数据目标属性引用的是一个类而不是一个ID。在这种情况下，最好使用一个ID，所以如果你在代码的其他地方调用这个类，你就不要向javascript扔曲线球

我还看到您有几个空白的

。我不确定这是否是有意的，但我会参考我所附的结构

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

<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>

切换导航

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

修正： 在：bootstrap.min.css上进行这些更改

这将修复切换按钮的外边框 加

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

这将修复切换按钮的水平线 加

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

---

你是对的！我试图巧妙地处理它，结果把它弄坏了。那会教我的！只需添加.navbar默认类，而不用编写长代码！

.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
}

border:1px solid #444;

.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;
}

border:1px solid #444;

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