使用Bootstrap，我构建了一个NAV菜单。菜单在宽屏幕上工作正常，但是当移动折叠菜单被激活并且您单击菜单将其打开时，包含在类moves_down_with_menu的行中的内容随菜单向下移动。菜单打开时，我希望行不会改变。我只是希望菜单能够完成它。但是，我也希望它能像通常那样工作。
我如何做到这一点？
http://jsfiddle.net/k98Bn/65/就是它正在做的事情的一个例子
已编辑：添加了不同的部分
<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>
答案 0 :(得分：0)
所以在你的评论后我调整了它...希望这更像你在寻找...我必须编辑一些bootstrap类规则。除了几个可怕的命名实用程序类;）
基本上你只想将这些部分包装在它们自己相对定位的容器中。相对定位的容器内的导航栏将位于绝对位置。
导航栏下方的部分也将位于相对容器中，顶部偏移与中心栏的高度相同。如果你使用像sass这样的预处理器。使导航高度成为变量并引用而不是静态值。这是为了确保您更改导航高度，以下部分会自动调整！
希望这次对你有好处！ 链接到codepen https://codepen.io/stevebennn/pen/1f445118e4d8dbdec13149c0defd1197
.navbar {
position: absolute;
width: 100%;
top: 0;
z-index: 1
}
.jumbotron {
width: 100%;
height: 100%;
background: #00bcd4;
}
.relative-container {
position: relative;
}
.margin-nuke {
margin: 0;
}
.content-container {
top: 50px; /* this is the height of the navbar. you should make it a variable so you know they are always the same :)*/
background: #e3e;
width: 100%;
}
答案 1 :(得分：0)
您可以将position: absolute添加到导航栏中（您最需要更改与第一个Jumbotron关联的高度和填充）。
<强>绝对
不要为元素留出空间。相反，将它定位在 相对于其最近定位的祖先的指定位置（如果有的话）， 或者相对于初始包含块。绝对 定位的盒子可以有边距，它们不会随之崩溃 其他利润。
有关详细信息，请参阅MDN上的Position。
CSS示例：
.navbar {
background: transparent;
position: absolute;
width: 100%;
z-index: 1500;
}
或者您可以将Bootstrap类navbar-fixed-top添加到导航栏div（您的导航栏将滚动显示页面。）
.navbar.navbar-inverse {
background: transparent;
position: absolute;
width: 100%;
z-index: 1500;
}
#hero .jumbotron {
background: blue;
height: 325px;
margin: 0;
}
#hero .jumbotron .marketing {
padding-top: 50px;
}
#part2 .jumbotron {
background: red;
padding: 20px;
margin: 0;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="hero">
<div class="jumbotron">
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap 3.0 Skeleton</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<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">
<p>
This should not move with menu open
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<section id='part2'>
<div class='jumbotron'>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy
text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>