Bootstrap：下拉菜单涵盖内容答案

【问题标题】：Bootstrap: dropdown menu covers contentBootstrap：下拉菜单涵盖内容
【发布时间】：2016-09-18 03:51:17
【问题描述】：

我的代码保存在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>

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

【问题讨论】：

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

那是因为您使用的类navbar-fixed-top 使导航栏保持固定——不在文档的流中。你可以：

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

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

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

检查这个DemoFiddle

【讨论】：

抱歉，position:static; 似乎不起作用。我添加了更多的文本来测试它。请参阅jsfiddle.net/qba2xgh6/5 导航栏与文本一起滚动。
@shapeare 显然是因为它不再是固定的了......如果你想在滚动后修复它也需要 jquery。

【解决方案2】：

从最外层的<div>中删除类navbar-fixed-top

【讨论】：

【解决方案3】：

您将看到fixed navigation 的预期行为。如果您删除导航上的.navbar-fixed-top 类，它会删除导航的“粘性”并且它将遵循内容流。

您可以在 http://jsfiddle.net/qba2xgh6/4/ 上获取示例，我还从 .main 中删除了边距，因为它不再需要了。

【讨论】：

【解决方案4】：

当我第一次开始使用 Bootstrap 时，我遇到了这个问题。当您使用 navbar-fixed-top 类时，导航栏将停留在页面顶部。删除它，然后它会按预期工作。

【讨论】：