2014-07-14 3 views
0

Я использую bootstreap 3. Мой код ниже div .navbar отображается правильно сверху. Но проблема с .container она не показывает ниже .navbar Какие изменения я должен сделать, чтобы работать правильно его. Контейнер не отображается ниже .navbar

<body> 
     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">My Office</a> 
       </div> 
       <div class="navbar-collapse collapse pull-right top-margin"> 
        <form class="form-inline" method="post" action="login"> 
         <div class="form-group"> 
          <input type="text" placeholder="Username" name="userName" class="form-control"> 
         </div> 
         <div class="form-group"> 
          <input type="password" placeholder="Password" name="password" class="form-control"> 
         </div> 
         <button type="submit" class="btn btn-success">Sign in</button> 
        </form> 
       </div><!--/.navbar-collapse --> 
      </div> 
     </div> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs10">Join us</div> 
       <div class="col-xs-2"> 
        <button type="submit" class="btn btn-default">Sign Up</button> 
       </div> 
      </div> 
     </div> 
    </body> 

ответ

2

Вам нужно добавить отступы в верхней части body для фиксированных NavBars:

body { padding-top: 70px; }

Из документов:

фиксированный на vbar наложит ваш другой контент, если вы не добавите отступ в верхнюю часть корпуса <>. Попробуйте свои собственные значения или воспользуйтесь нашим фрагментом ниже. Совет. По умолчанию навигационная панель имеет высоту 50 пикселей.

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