引导折叠菜单在展开时不会将内容下推 [英] Bootstrap collapsed menu not pushing content down when expanded

问题描述

我使用Twitter Bootstrap来回应网站的回应。我有一个问题，但是对于较小的宽度，折叠的菜单超过页面的内容，而不是推下。

I am using Twitter Bootstrap to play around with the responsive side of a website. I am having a problem however with the smaller widths where the collapsed menu is going over the content of the page, rather than pushing it down.

我用这个例子来建立我的导航：

I used this example to build my navigation:

http://getbootstrap.com/examples/navbar-fixed-top/

查看例如，它不会将内容下推。

Looking at the example, it doesn't push the content down either.

我已经看到一些答案，在身上使用填充，但这对我没有效果。我也试过把溢出在一些元素，但它没有什么区别。

I've seen some answers to this to use padding on the body, but this has not worked for me. I've also tried putting overflow on some elements but its made no difference.

我的导航代码是：

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

        <h1 class="logo-title">
            <a href="index.html"><span>Logo</span></a>
        </h1>

      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">item1</a></li>
          <li><a href="#">item2</a></li>
          <li><a href="#">item3</a></li>
          <li><a href="#">item4</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

我是Responsive Design的新手，已经看到很多网站，这是一个好的习惯，像这样折叠的菜单，还是纯粹的偏好？

I'm new to Responsive Design and have seen many websites with the collapsed menu pushing down the content. Is it good practice to have collapsed menus like this or is it a pure preference thing?

我的主要问题是当折叠菜单是否有效？

My main question is how can I get the content to be pushed when the collapsed menu is active?

感谢您提供帮助。

推荐答案

我不知道。这似乎工作...（一种hack虽然）。

I don't know. This seems to work... (kind of a hack though).

.navbar-fixed-top {
  top: -70px; /* you'll have to figure out the exact number here */
}

.navbar-fixed-top, .navbar-fixed-bottom {
  position: relative; /* this can also be static */
}

这篇关于引导折叠菜单在展开时不会将内容下推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！