响应式菜单在移动设备中始终可见

Question

我为大型设备和移动设备设计了菜单，但问题是切换菜单总是在展开视图中显示。给出col-md-3 & col-md-9时出现问题

有什么办法可以解决这个问题吗？

我的HTML代码

<div class="container">
   <div class="row">
      <div class="col-md-3"><img class="img-responsive logo" src="images/logo.png" ></div>
      <div class="col-md-9">
         <nav class="navbar navbar-default" style="background:none; border:none;">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
               <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 class="collapse navbar-collapse visible-xs" id="bs-example-navbar-collapse-1">
               <ul class="nav navbar-nav navbar-right text-center">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About us</a></li>
                  <li><a href="#">Employers</a></li>
                  <li><a href="#">Job Seekers</a></li>
                  <li><a href="#">Testimonials</a></li>
                  <li><a href="#">Contact us</a></li>
               </ul>
            </div>
         </nav>
      </div>
   </div>
</div>

Answer 1

现在看看这个 https://jsfiddle.net/MadhawaMB/qhft4w1L/1/

我更改一些代码
切换分组以获得更好的移动显示效果

   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

<div class="container">
   <div class="row">
      <div class="col-md-3"><img class="img-responsive logo" src="images/logo.png" ></div>
      <div class="col-md-9">

<nav class="navbar navbar-default" role="navigation" style="background:none; border:none;">
  <div class="container-fluid">
    <!-- toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>



    <!-- 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">
       <ul class="nav navbar-nav navbar-right text-center">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About us</a></li>
                  <li><a href="#">Employers</a></li>
                  <li><a href="#">Job Seekers</a></li>
                  <li><a href="#">Testimonials</a></li>
                  <li><a href="#">Contact us</a></li>
               </ul>
      </ul>



    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav></div>
   </div>
</div>

响应式菜单在移动设备中始终可见

Responsive menu is always visible in mobile devices

html

css

twitter-bootstrap

responsive