Bootstrap:下拉菜单包含内容

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>