Bootstrap Sidebar und Inhalt unter Navbar

Question

Kann mir jemand bei diesem Problem helfen? Warum sind meine Sidebar und mein Inhalt unter meiner Navbar? Ich habe versucht, Klasse zu entfernen und einige Änderungen vorzunehmen, und ich habe keinen Erfolg.

Sidebar und Inhalt sollte unter Navbar nicht sein?

Ich weiß, dass ich diesen Klasseneinsatz in der Zeile erstellen und mein Problem beheben kann, aber ich versuche die Lösung, ohne irgendeine CSS oder zusätzliche Klasse zu erstellen.

.margin-top100{ 
    margin-top:100px; 
} 

html:

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-lg-12"> 
     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <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> 
      project 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right text-center"> 
      <li><i class="fa fa-pencil" aria-hidden="true"></i> 
       <br>link </li> 
      <li><i class="fa fa-gavel" aria-hidden="true"></i> 
       <br>link</li> 
      <li> 
       <br> Welcome </li> 
      </ul> 
     </div> 
     <!--/.navbar-collapse --> 
    </div> 
    </nav> 
    </div> 
</div> 
</div> 
<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-mg-2 col-sm-2"> sidebar </div> 
    <div class="col-mg-10 col-sm-10"> content </div> 
    </div> 
</div> 

css:

.navbar-inverse { 
    padding: 20px; 
    color: white; 
} 

jsfiddle: https://jsfiddle.net/5zc66j20/

Dank.

Answer 1

Wie Bootstrap-Dokumentation auf: http://getbootstrap.com/components/#navbar-fixed-top. Standardmäßig ist die Navigationsleiste 50 Pixel hoch.

Lösung 1:

body { 
    padding-top: 70px; 
    } 

Lösung 2:

Änderung der Klasse: navbar-fixed-top zu navbar-static-top

alle Dank.

Answer 2

Fiddle UPDATED

nur wegen der position Eigenschaft dieses Problem auftritt. jetzt die Lösung:

.margin-top100{ 
    margin-top:100px; 
} 

Gebrauchsklasse margin-top100, wenn Ihr Inhalt Abschnitt beginnt.

Answer 3

Ich würde this tutorial für immer Dinge arbeiten

Es mir sehr empfehlen sieht aus wie sie Polsterung an der Oberseite des Körpers hinzuzufügen. Ich gebe zu, dass ich auch nicht verrückt nach dieser Antwort bin. Wenn die Navigationsleiste jedoch position: fixed; hat, gibt es keine Möglichkeit, andere Elemente automatisch umlaufen zu lassen (das ist der Punkt von position: fixed).