Question

我的Bootstrap网站中的移动导航无法崩溃。我在这个网站上运行3.2版本。我已经尝试了我能想到的一切，但没有任何效果。我还检查了我用Bootstrap构建的其他网站，一切都在那里工作正常。我在这里缺少什么？

这是我的HTML：

＆＃13;

<body>
	<div class="topbar" id="page">
        <div class="col-xs-12 mobile-nav">
        <div class="container">
            <!--add this where you want the button to be displayed-->

<div class="navbar navbar-default" role="navigation">
                 
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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><!--navbar-header--> 
</div>
</div>
            
        </div><!--closes container-->
        <div class="nav-wrap navbar-fixed-top fix-nav">
            <div class="container">
                <div class="col-xs-6 col-xs-offset-3 col-sm-2 col-md-1">
                    <a href="index.html"><img src="images/ttmheadlogo.png" class="img-responsive logo" alt="thank the monkey local mobile coupons logo link home" /></a>
                </div>

                <div class="col-xs-12 col-sm-10 col-md-11 nav-text">
                    <nav class="collapse navbar-collapse navbar-ex1-collapse">                
                        <ul class="col-sm-12 list-unstyled nav nav-justified">
                            <li class="active"><a href="index.html">HOME</a></li>
                            <li><a href="consumers.html">CONSUMERS</a></li>
                            <li><a href="business.html">BUSINESSES</a></li>
                            <li><a href="media.html">MEDIA PARTNERS</a></li>
                            <li><a href="contact.html">CONTACT</a></li>
                        </ul>
                    </nav>
                </div>
            </div><!--closes container-->
    </div><!--closes col-xs-12-->
    </div><!-- closes topbar -->

＆＃13;

Answer 1

看起来你有一些额外的div标签导致了这个问题。如果您稍微修改导航区域（如下所示），您应该很高兴。我会粘贴我工作的内容，你只需要弄清楚你想要如何整合你的徽标（我在排除故障时把它拿出来）：

＆＃13;

 <div class="topbar" id="page">
        <div class="col-xs-12 mobile-nav">
            <div class="container">

                <div class="navbar navbar-default" role="navigation">

                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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><!--navbar-header-->
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="index.html">HOME</a></li>
                            <li><a href="consumers.html">CONSUMERS</a></li>
                            <li><a href="business.html">BUSINESSES</a></li>
                            <li><a href="media.html">MEDIA PARTNERS</a></li>
                            <li><a href="contact.html">CONTACT</a></li>
                        </ul>
                        </nav>
                    </div>
                </div><!--closes container-->
        </div><!--closes col-xs-12-->
    </div><!-- closes topbar -->

＆＃13;

Bootstrap 3.2上的切换按钮不会崩溃

1 个答案: