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

Answer 2

从最外面的navbar-fixed-top

中删除课程<div>

Answer 3

您正在查看fixed navigation的预期行为。如果您删除了导航中的.navbar-fixed-top课程，则会删除“粘性”＆＃39;导航，它将遵循内容流程。

你可以在http://jsfiddle.net/qba2xgh6/4/处找到样本，我也从.main中删除了边距，因为它不再需要了。

Answer 4

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

Bootstrap：下拉菜单包含内容

4 个答案: