0
最近、ブートストラップ3で作業を開始しましたが、ドキュメントを読んだ後、navbarと次のセクションが自分のdivで分離できない理由がわかりません。Yamm navbarと本体との間隔に関する問題
この場合、megamenuにyamm3を使用し、次の部分は3つの水平検索ボックスです。
本文セクションでは、yamm cssのパディングを調整しようとしましたが、スタックされたまま表示されます。あなたはナビゲーションバーの下のスペースを追加しようとしている場合は、あなたの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> \t
</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">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-8">
\t \t \t \t \t <h2>Lorem Ipsum</h2>
\t \t \t \t \t <p>
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t </p>
\t \t \t \t </div> \t
\t \t \t \t <div class="col-md-4"> \t \t \t \t \t
\t \t \t \t \t <h2>Loremp Ipsum 2</h2>
\t \t \t \t \t <p> \t \t \t \t \t \t
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t \t 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.
\t \t \t \t \t </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>