Jquery 响应式移动引导菜单，移动内容

使用引导程序，我构建了一个导航菜单。该菜单在宽屏幕上工作正常，但当移动折叠菜单被激活并单击菜单打开时，包含在带有类

的行中的内容会随着菜单向下移动。我希望菜单打开时该行不会更改。我只想把菜单再看一遍。然而，我也希望它能像平常一样正常工作

我如何做到这一点

这是它正在做的一个例子

编辑：添加了不同的部分

<section id='topbar'>
   <p> A black top bar with a message </p>
</section>
<section id='secondsection'>
<div id="hero" >
    <div class="jumbotron">
            <%= render 'shared/nav/nav_pages' %>
        <div class="container">
            <div class="row moves_down_with_menu">
                <div class="col-md-6 col-md-offset-3 marketing">
                    <h1>Some Title Test for display</h1>
                    <div id="heroform">
                        <%= render partial: 'shared/get_form', locals: {:get_form => get_form} %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>
<section id='thirdsection' >
</section>


带有消息的黑色顶部栏

显示的一些标题测试
获取表格}%>
所以在你的评论之后，我对它进行了调整…希望这是你想要的。。。我不得不编辑一些引导类规则。还有几个名称可怕的实用程序类；）

基本上，您只需要将这些部分包装在它们自己相对定位的容器中。相对定位容器内的导航栏将绝对定位

导航栏下方的部分也将位于顶部偏移与导航栏高度相同的相对容器中。如果您使用的是像sass这样的预处理器。将导航高度设置为一个变量，并引用该变量，而不是静态值。这是为了确保如果您更改导航高度，下面的部分会自动调整

希望这一次对你更好！
链接到代码笔


.navbar{
位置：绝对位置；
宽度：100%；
排名：0；
z指数：1
}
琼伯伦先生{
宽度：100%；
身高：100%；
背景：#00bcd4；
}
.相对容器{
位置：相对位置；
}
.边缘核武器{
保证金：0；
}
.内容容器{
顶部：50px；/*这是导航栏的高度。您应该将其设置为变量，以便知道它们始终相同：）*/
背景：#e3e；
宽度：100%；
}
您可以将
位置：绝对值
添加到导航栏中（您最喜欢的是，还需要更改与第一台Jumbotron相关的高度和填充）

绝对值

不要为元素留空间。相反，将其定位在
相对于其最近定位祖先的指定位置（如有），
或以其他方式相对于初始包含块。绝对地
定位框可以有边距，并且它们不会以任何方式折叠
其他利润

有关更多信息，请参阅MDN上的

示例CSS:

.navbar {
  background: transparent;
  position: absolute;
  width: 100%;
  z-index: 1500;
}

或者，您可以将引导类添加到navbar div中（但您的navbar将随页面滚动）


.navbar.navbar-inverse{
背景：透明；
位置：绝对位置；
宽度：100%；
z指数：1500；
}
#英雄，巨无霸{
背景：蓝色；
高度：325px；
保证金：0；
}
#英雄，巨无霸，市场营销{
填充顶部：50px；
}
#第二部分：巨无霸{
背景：红色；
填充：20px；
保证金：0；
}









显示的一些标题测试

这不应在菜单打开时移动


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
像Aldus PageMaker这样的出版软件包括Lorem Ipsum的版本。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一台不知名的打印机
拿起一个铅字厨房，把它翻成一本铅字样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着Letraset的发行而流行起来
包含Lorem Ipsum段落的纸张，以及最近使用的Aldus PageMaker等桌面出版软件，包括Lorem Ipsum版本。Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是
自16世纪以来，行业标准的虚拟文本，当时一位不知名的印刷商拿着一个铅字槽，将其拼凑成一本铅字样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变
不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件包括Lorem Ipsum的版本而流行。Lorem Ipsum只是一个傀儡
印刷和排版行业的文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五年
几个世纪以来，电子排版也出现了飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又通过桌面出版软件如
Aldus PageMaker，包括Lorem Ipsum的版本。Lorem Ipsum