Каков наилучший способ добавить некоторое пространство после navbar?

Question

Следующий код отображает навигационную панель всегда в верхней части страницы. Мне нужен второй контейнер (контент), который должен быть расположен в конце навигационной панели, а не под ним. В настоящий момент второй контейнер находится под навигационной панелью.

Я мог бы добавить пустое место в верхней части содержимого, но я не уверен, что это хороший подход. Любая идея, как ее решить?

<div class="container"> 
     <div class="row"> 
      <div class="container"> 
       <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
        <div class="container"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">Home</a></li> 
          <li><a href="#">Link</a></li> 
          <li><a href="#">Link</a></li> 
         </ul> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
        </div> 
       </nav> 
      </div> 
     </div> 
     <div class="row"> 
      <div ng-view></div> 
     </div> 
    </div> 

Answer 1

Согласно документации Bootstrap (http://getbootstrap.com/components/#navbar-fixed-top) вы должны использовать обивка-топ на теле ..

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

body { padding-top: 70px; } 

Демо: http://www.bootply.com/Ob3Bajkv1f

Answer 2

Просто добавьте margin-top: 50px; в нижележащий контейнер.

50px должен быть высотой вашего навигатора.

Answer 3

Вы должны были бы некоторые CSS, как это:

body { 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 

Или так:

.navbar { 
    margin-bottom: 20px; 
} 

Убедитесь, что вы используете только то, что вам нужно,

Answer 4

Я был в состоянии решить эту проблему используя следующий код.

<div class="container"> 
     <!-- navbar --> 
     <nav class="navbar navbar-default" role="navigation"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
         <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="#">KanbanBoard</a> 
       </div> 
       <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="#">Boards</a></li> 
        </ul> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="#">User</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

     <!-- boards --> 
     <div ng-view></div> 
    </div>