Css 引导折叠菜单展开时不向下推内容

我正在使用Twitter引导程序来处理网站的响应面。我有一个问题，但是与较小的宽度，折叠菜单是在页面的内容，而不是按下它去

我使用此示例构建我的导航：

看看这个例子，它也不会向下推内容

我已经看到了一些在身体上使用填充物的答案，但这对我来说并不奏效。我也尝试过在一些元素上设置溢出，但没有什么不同

我的导航代码是：

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

切换导航

我对响应式设计不太熟悉，见过许多网站的折叠菜单将内容向下推。这样折叠菜单是一种好的做法还是一种纯粹的偏好

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

---

提前谢谢你的帮助

有很多方法可以做到这一点

一种方法是在

.container

上切换一个类，或者在导航下包装内容的任何元素

例如：

.container {
  transition: padding 500;
}

.container-is-open {
  padding-top:200px;
}

---

我不知道。这似乎有效。。。（不过有点像黑客）

---

如果您使用的是

fixed

navbar，则展开菜单不会向下推内容。为此，您必须使用

static

标题本身。检查您作为参考提供的引导示例链接

<nav class="navbar navbar-light bg-light navbar-expand-lg static-top">

---

为避免导航栏下方出现空白，请在导航栏后的第一个“div”中添加以下行，例如：jumborton

.jumbotron {
    margin-top: -20px;
}

第1部分： 我所做的是包装所有要移动的元素

var icon=document.getElementsByClassName（“图标栏”）；
var pushDown=document.getElementById（“push”）；
$（文档）.ready（函数（）{
$（图标[0]）。单击（函数（）{
if（$（下推）.hasClass（“下推”））{
pushDown.className=“pushUp”；
}
否则{
pushDown.className=“push”；
}
})
});
表单{
最大宽度：500px；
保证金：0px自动；
文本对齐：居中；
}
输入，文本区{
边框：3px实心#f47909；
垫底：10px；
}
输入：焦点，文本区域：焦点{
大纲：无；
边框：3px实心#f2a25a；
}
标签{
显示：块；
边缘底部：20px；
}
跨度{
显示：块；
}
文本区{
最大高度：200px；
高度：200px；
宽度：300px；
最大宽度：300px；
}
/*rest与index.css相同*/
*{
字体系列：“futura”；
}
纳维先生{
边界半径：0px；
边际：0px；
高度：70像素；
垫面：5px；
}
@媒体屏幕和屏幕（最小宽度：768px）{
.navbar.navbar导航{
显示：内联块；
浮动：无；
}
李{
右侧填充：30px；
字号：19px；
}
}
@媒体屏幕和屏幕（最大宽度：767px）{
.导航栏倒塌{
边缘顶部：15px；
背景色：#FAFAFA；
}
李{
字号：17px；
}
}
.图标栏{
背景色：#337ab7；
}
.图标栏灯{
背景色：#23527C；
}
#李：悬停{
背景色：#FAFAFA；
字体大小：20px；
字体大小：粗体；
}
.navbar品牌{
字体大小：25px；
颜色：#1d78c6；
}
#页脚{
边缘顶部：50px；
填充顶部：30px；
边框顶部：2个点#8bc771；
文本对齐：居中；
}
#描述{
边缘顶部：20px；
文本对齐：居中；
字体大小：30px；
}
.推{
转变：转变0.5s；
转换：转换（0px，160px）；
}
.俯卧撑{
转变：转变0.5s；
转换：转换（0px，0px）；
}

病毒乐趣
切换导航







想问什么就问什么
你的名字
你的电子邮件
你的信息
©2017病毒娱乐版权所有

在我的例子中，它改变了这一点

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

为此：

.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 0 0 30px 0px;   /* new padding */
}

这个有用

同样的问题，这里的所有答案都恢复为一个静态导航条，这不是你想要的

在导航栏之后但在内容开始之前抛出一个空白div标记（带高度）。此空div向下推送内容，并保持隐藏在导航栏后面。使用javascript/jquery切换两个移动宽度的div

HTML

Javascript/jquery

$('.navbar-toggle').on("click", function(){
    $('#pushContent').slideToggle();
});

导航栏固定顶部

这样可以防止手风琴的下推特性。你必须用你自己的javascript或css把它推敲出来。
在
数据目标中提到一个“id”，并将该“id”添加到包含折叠导航条形码的“div”中。详情如下:

<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">
              <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" id="navbar">
            <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>


切换导航







这个
数据目标
调用一个特定的“id”，在此基础上，导航栏将进行切换。
我也遇到了同样的问题，查看了答案，但我感到困惑，因为它们不是
.wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -30px;
    padding: 0 0 30px 0px;   /* new padding */
}

</nav>
<div class="container main">
<div id="pushContent"></div>

@media (max-width: 767px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

@media (max-width: 480px) {
    #pushContent {
    height: 222.5px;
    width:100%;
    display: none;
    }
}

$('.navbar-toggle').on("click", function(){
    $('#pushContent').slideToggle();
});

<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">
              <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" id="navbar">
            <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>