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

问题描述

我正在使用 Twitter Bootstrap 来处理网站的响应性方面.但是，我遇到了折叠菜单越过页面内容而不是将其向下推的较小宽度的问题.

我用这个例子来构建我的导航:

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

看看这个例子，它也没有向下推内容.

我已经看到了一些关于在身体上使用填充的答案，但这对我不起作用.我也试过在某些元素上设置溢出，但没有任何区别.

我的导航代码是:

<div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><h1 class="logo-title"><a href="index.html"><span>标志</span></a>
<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></div><!--/.nav-collapse -->

我是响应式设计的新手，见过许多网站的折叠菜单将内容向下推.像这样折叠菜单是一种好习惯还是纯粹的偏好?

我的主要问题是如何在折叠菜单处于活动状态时获得要推送的内容?

预先感谢您的帮助.

解决方案

我不知道.这似乎有效......(虽然有点黑客).

.navbar-fixed-top {顶部:-70px；/* 你必须在这里找出确切的数字 */}.navbar-fixed-top, .navbar-fixed-bottom {位置:相对；/* 这也可以是静态的 */}

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.

My code for the navigation is:

<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>

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?

Thank you in advance for the help.

解决方案

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 */
}

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