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 并尝试。

Answer 2

你需要使用navbar-fixed-top 类并为main 块设置顶部填充：

main {
padding-top: 60px;
}

http://www.bootply.com/aROSWOLDZY