最近我开始使用bootstrap 3，但之后阅读文档无法弄清楚为什么导航栏和下一部分不能在他们自己的div上分开。
在这种情况下，我使用yamm3作为megamenu，下一部分是3个水平搜索框。
尝试调整css，在身体部分，yamm css填充但仍然显示堆叠。
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://geedmo.github.io/yamm3/yamm/yamm.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar yamm navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button><a href="#" class="navbar-brand">Marca</a>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Links<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<ul class="col-md-4 list-unstyled">
<li>
<p><strong> </strong>
</p>
</li>
<li><a href="#">Navigation link</a>
</li>
<li><a href="#">Navigation link</a>
</li>
<li><a href="#">Navigation link</a>
</li>
<li><a href="#">Navigation link</a>
</li>
<li><a href="#">Navigation link</a>
</li>
</ul>
<ul class="col-md-4 list-unstyled">
<li>
<p><strong> </strong>
</p>
</li>
<li><a href="#">Navigation link</a>
</li>
<li><a href="#">Navigation link</a>
</li>
<li><a href="#">Navigation link</a>
</li>
<li><a href="#">Navigation link</a>
</li>
<li><a href="#">Navigation link</a>
</li>
</ul>
<ul class="col-md-4 list-unstyled">
<li>
<p><strong> </strong>
</p>
</li>
<li><a href="#">Navigation link</a>
</li>
<li><a href="#">Navigation link</a>
</li>
<li><a href="#">Navigation link</a>
</li>
<li class="divider"><a href="#">Navigation link</a>
</li>
<li><a href="#">Navigation link</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<!-- Classic dropdown -->
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Classic<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Menu link</a>
</li>
<li><a href="#">Menu link</a>
</li>
<li><a href="#">Menu link</a>
</li>
<li><a href="#">Menu link</a>
</li>
<li><a href="#">Menu link</a>
</li>
<li><a href="#">Menu link</a>
</li>
<li><a href="#">Menu link</a>
</li>
<li><a href="#">Menu link</a>
</li>
<li><a href="#">Menu link</a>
</li>
<li><a href="#">Menu link</a>
</li>
</ul>
</li>
<!-- Classic dropdown -->
<li class="dropdown"><a href="#" target="_blank">Option 3</a>
</li>
<!-- Classic dropdown -->
<li class="dropdown"><a href="#" target="_blank">Corporate</a>
</li>
<!-- Classic dropdown -->
<li class="dropdown"><a href="#" target="_blank">Option 4</a>
</li>
<!-- Classic dropdown -->
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contact<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#">1</a>
</li>
<li><a href="#">2</a>
</li>
<li><a href="#">3</a>
</li>
<li><a href="#">4</a>
</li>
<li class="divider"><a href="#.html">5</a>
</li>
<li><a href="#">6</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<section>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="employee search" class="col-md-2 control-label">Employee Search</label>
<div class="col-md-10">
<input type="text" class="form-control" action="#" method="POST" target="_blank">
</div>
</div>
<div class="form-group">
<label for="intranet search" class="col-md-2 control-label">Intranet Search</label>
<div class="col-md-10">
<input type="text" class="form-control" action="#" method="POST" target="_blank">
</div>
</div>
<div class="form-group">
<label for="keyword entry" class="col-md-2 control-label">Keyword Entry <span class="glyphicon glyphicon-search"></span>
</label>
<div class="col-md-10">
<form name="input" action="#" method="GET " target="_blank">
<input type="text" name="keyword" placeholder="keyword entry" class="form-control">
</form>
</div>
</div>
</form>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-md-8">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
</p>
</div>
<div class="col-md-4">
<h2>Loremp Ipsum 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam ipsa esse temporibus. Cupiditate ipsa modi, nemo tempora dolorem, perferendis impedit, illum quidem vitae quod fuga deleniti. Molestias, culpa molestiae.
</p>
</div>
</div>
</div>
答案 0 :(得分：0)
如果您尝试在导航栏下添加空格，可以将以下内容添加到CSS中：
.yamm.navbar + section {
margin-top: 80px; /* or whatever margin you want */
}