Проблемы с интервалом между Yamm navbar и телом

Недавно я начал работать с бутстрапом 3, но после того, как прочитать документацию не могу понять, почему навигатор и следующий раздел не могут быть разделены на свои собственные div.Проблемы с интервалом между Yamm navbar и телом

В этом случае я использую yamm3 для мегаменю, а следующая часть - 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> \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>

источник

2016-05-02 Acidous

Если вы пытаетесь добавить пространство под навигационной панели, вы можете добавить следующие строки в CSS:

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

источник

2016-05-02 20:08:00 smrubin

Проблемы с интервалом между Yamm navbar и телом

ответ

Смежные вопросы