Inhalt teilweise verdeckt unter Navbar

Question

Bitte führen Sie den folgenden Ausschnitt:

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>

Beachten Sie, dass die erste Verbindung vollständig unter der Navigationsleiste versteckt ist.

Wie könnte ich den HTML/CSS bearbeiten, so dass der Inhalt nie ausgeblendet wird? (auch wenn die navbar Höhe erhöht)

Answer 1

Verwendung dieses css .page{margin-top:50px}

Answer 2

der Grund dafür ist, dass Ihr list-group Element am Dokumentrand beginnt, ich meine, es ist margin-top = 0px; so logisch unter es liegt. Anzeige in Ihrem CSS:

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

bemerkte ich, der Höhenwert ändern kann, wahrscheinlich je nach Gerät oder Anzeigewerte ... sicherstellen, dass es einen geeigneten Wert für jeden Fall geben ...