css - Bootstrap : dropdown menu covers content

Question

我的代码保存在 http://jsfiddle.net/qba2xgh6/1/ ，来自Bootstrap官网。

代码如下:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 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>

      <a class="navbar-brand" href="index.php">My Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li><a href="index.php">Home</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container main">
  <p>
    Hello, the main content starts here.
    Hello, the main content starts here.
    Hello, the main content starts here.
    Hello, the main content starts here.
    Hello, the main content starts here.
    Hello, the main content starts here.Hello, the main content starts here.
  </p>
</div>

问题是当我点击右上角的下拉按钮时，下拉菜单出现并覆盖了主要内容。我怎样才能避免这种情况？我希望它能下推主要内容。

Answer 1

那是因为您正在使用使导航栏保持固定的 navbar-fixed-top 类——在文档流之外。您可以:

• 删除该类。但它也会删除所有设备和分辨率上的行为。

• 如果您想为所有人保留它但不为移动设备保留它，请添加此媒体查询:

  @media (max-width:768px) {
      .main {
          margin-top:0;
      }
      .navbar-fixed-top {
          position:static;
      }
  } 
  

检查这个 DemoFiddle