html - Yamm 导航栏和正文之间的间距问题

Question

最近我开始使用 bootstrap 3，但在阅读文档后无法弄清楚为什么导航栏和下一部分不能在它们自己的 div 上分开。

在这种情况下，我使用 yamm3 作为 megamenu，接下来的部分是 3 个水平搜索框。

尝试调整 css，在 body 部分，yamm css padding 但仍然显示堆叠。

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

Answer 1

如果您尝试在导航栏下方添加空间，您可以将以下内容添加到您的 CSS:

.yamm.navbar + section {
    margin-top: 80px; /* or whatever margin you want */
}