bootstrap verhindern navbar-fixed-bottom overlap

Question

In einigen Fällen überlappt der Bootstrap navbar-fixed-bottom anderen Inhalt, ohne dass eine Bildlaufleiste angezeigt wird.

Zum Beispiel https://jsfiddle.net/m5vgd9g7/1/:

<div> 
    <a class="btn btn-primary" href="#"> 
    Button 
    </a> 
</div> 

<div class="navbar navbar-default navbar-fixed-bottom" 
     style="padding-bottom:0px; min-height:0px"> 
    bottom 
</div> 

Wenn Sie den Anzeigebereich sehr kurz vertikal machen, wird der Text "unten" überlappt mit der Taste:

Wie kann die Überlappung verhindert werden, Es erscheint also eine vertikale Bildlaufleiste, bevor sie sich überschneiden.

Answer 1

Sie sollen eine Klasse Ihres Top-div hinzuzufügen, die row, so dass Ihr Top-html wie

<div class="row"> 
    <a class="btn btn-primary" href="#"> 
    Button 
    </a> 
</div> 

Ihr vertikal eine Scrollbar für Ihre Inhalte dieser fügt aussehen würde. Aber wenn wir eine feste Navigationsleiste deklarieren, sollten Sie daran denken, dem Rest des Inhalts eine Auffüllung/einen Rand an die Größe der Navigationsleiste hinzuzufügen, die den Rest des Inhalts anzeigen sollte, ohne von der Navigationsleiste beeinträchtigt zu werden. So Ihre endgültige HTML für die Top-div würde so aussehen,

<div class="row" style="padding-bottom:15px;"> 
    <a class="btn btn-primary" href="#"> 
    Button 
    </a> 
</div> 

Hinweis: Ich würde nie Inline-Stile verwenden, da es die HTML auf lange Sicht und schwer zu debuggen erschweren würde. Ich habe es hier gemacht, um es zu demonstrieren.

Und die Geige Beispiel ist hier: https://jsfiddle.net/m5vgd9g7/

EDIT

Dank @JDiMatteo, die über die row Klasse zusätzlich kommentiert. Ich war dabei, die Bootstrap-Standards im Grid-System beizubehalten. (Ref: http://getbootstrap.com/css/#grid). Anscheinend scheint es, dass row in container oder container-fluid Klassen enthalten sein sollte, damit es funktioniert. Dadurch wird eine Zeile definiert, in der sich Elemente/Spalten (wie im Bootstrap) befinden können. Dadurch können Sie das zuvor verwendete benutzerdefinierte Design padding/margin loswerden.

<div class="container"> 
    <div class="row"> 
    <a class="btn btn-primary" href="#"> 
     Button 
    </a> 
    </div> 
</div>