Содержание частично скрыты под Navbar

Question

Пожалуйста, запустите следующий фрагмент кода:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"> 
 
      <span class="glyphicon glyphicon-home"></span> 
 
     </a> 
 
     <button type="button" class="navbar-toggle collapsed" 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> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <div class="navbar-form"> \t \t 
 
       <button>Sign in</button> 
 
      </div> 
 
     </ul> 
 
    </div> 
 
</div> 
 
<div data-momentum=""> 
 
    <div class="page"> 
 
     <div class="list-group"> 
 
      <a class="list-group-item" href="#">First link</a> 
 
      <a class="list-group-item" href="#">Second link</a> 
 
      <a class="list-group-item" href="#">Third link</a> 
 
      <a class="list-group-item" href="#">Last link</a> 
 
     </div> 
 
    </div> 
 
</div>

Обратите внимание, что первая ссылка будет полностью скрыта под навигационной панели.

Как я могу отредактировать HTML/CSS, чтобы содержимое никогда не скрывалось? (Даже если высота NavBar увеличивает)

Answer 1

использовать этот CSS .page{margin-top:50px}

Answer 2

причина этого заключается в том, что ваш list-group элемент, начиная с края документа, я имею в виду, это margin-top = 0px; так логически он находится под. объявление в вашем CSS:

.list-group{ 
    margin-top: 50px; 
    /*50px or the value of the height of navbar-header */ 
} 

Я заметил, что значение высоты может измениться, вероятно, в зависимости от значений устройства или дисплея ... убедитесь, что дать ему правильное значение для каждого случая ...