css - Bootstrap + 移动菜单覆盖

Question

我有一个使用 Bootstrap 3 的页面。在这个页面中，我有一个导航栏，其定义如下:

<nav class="navbar" style="background-color:orange;">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="color:#000 !important;">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar" style="color:#000;"></span>
        <span class="icon-bar" style="color:#000;"></span>
        <span class="icon-bar" style="color:#000;"></span>
      </button>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="/home" class="dropdown-toggle navbar-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Home <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/help">help</a></li>
            <li><a href="/help">contact</a></li>            
         </ul>
       </li>
      </ul>

      <div class="navbar-right">
        <div class="visible-xs">
          <div class="row">
            <div class="col-xs-6">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2016</a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#" data-toggle="modal" data-target="_blank">Q1</a></li>
                <li><a href="#" target="_blank">Q2</a></li>
                <li><a href="#" target="_blank">Q3</a></li>
                <li><a href="#" target="_blank">Q4</a></li>                
              </ul>
            </div>

            <div class="col-xs-6">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2017</a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#" data-toggle="modal" data-target="_blank">Q1</a></li>
                <li><a href="#" target="_blank">Q2</a></li>
                <li><a href="#" target="_blank">Q3</a></li>
                <li><a href="#" target="_blank">Q4</a></li>                
              </ul>
            </div>
         </div>
       </div>

       <div class="hidden-xs">
         <ul class="nav navbar-nav">
           <li>
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2016</a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#" data-toggle="modal" data-target="_blank">Q1</a></li>
                <li><a href="#" target="_blank">Q2</a></li>
                <li><a href="#" target="_blank">Q3</a></li>
                <li><a href="#" target="_blank">Q4</a></li>                
              </ul>
           </li>

           <li>
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2017</a>
              <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#" data-toggle="modal" data-target="_blank">Q1</a></li>
                <li><a href="#" target="_blank">Q2</a></li>
                <li><a href="#" target="_blank">Q3</a></li>
                <li><a href="#" target="_blank">Q4</a></li>                
              </ul>             
           </li>
         </ul>
       </div>
     </div>
   </div>
 </div>
</nav>

导航栏在大屏幕上的外观和工作方式与我想要的一样。但是在手机上，它不能正常工作。正如您在此 Bootply 中看到的那样，导航菜单将主要内容(Lorem Ipsum)向下推。但是，我希望导航菜单显示在内容之上，以便移动导航显示在 Lorem Ipsum 内容之上。我做错了什么？

Answer 1

你想要这样吗:

http://www.bootply.com/9OB6nhtg4i#

    @media (max-width:768px) {
       .navbar {
         position: absolute;
       }
    }

添加此 css 并尝试。