Navbar-Tastengruppe wird nicht korrekt abgeglichen

Question

Ich versuche eine Nav-Leiste zu erstellen, die auf der linken Seite erscheinen würde, während der Rest des Inhalts auf der rechten Seite wäre. Das Problem ist, dass sich die Navigationsleisten-Schaltflächengruppe nicht im selben Abschnitt mit dem Navigationsleisten-Header befindet. Ich möchte, dass die Nav-Bar-Buttons vertikal mit dem Navbar-Header auf der linken Seite ausgerichtet sind, aber jetzt überlappen sie sich einfach. Nicht nur das, es sieht so aus, als ob die Schaltflächengruppe zwischen dem Navbar-Header und dem Rest des HTML-Inhalts sitzt/überlappt.

Vielen schätzen alle Hilfe, die mich darauf hinweisen können, dies zu beheben! Vielen Dank!

<div class="container-fluid"> 
     <div class="row"> 
     <div class="col-sm-3 col-lg-2"> 
      <nav class="navbar navbar-default navbar-fixed-side"> 
      <div class="container"> 
       <div class="navbar-header"> 
       <a class="navbar-brand" href="./">Lessons</a> 
       </div> 
       <div class="btn-group-vertical navbar-btn"> 
        <div class="btn-group navbar-btn"> 
         <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> 
          Lesson #1<span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu" role="menu"> 
          <li>Lecture</li> 
          <li>Quiz</li> 
          <li>Exam</li> 
         </ul> 
         <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> 
          Lesson #2<span class="caret"></span> 
         </button> 
         <ul class="dropdown-menu" role="menu"> 
          <li>Lecture</li> 
          <li>Quiz</li> 
          <li>Exam</li> 
         </ul> 
        </div> 
       </div> 
      </div> 
      </nav> 
     </div> 
     <div class="col-sm-9 col-lg-10"> 
      <div id="lesson"> 
      <h2>Choose a lesson on the left panel to start your study module.</h2> 
      </div> 
     </div> 
     </div> 
    </div> 

Answer 1

Zunächst einmal, Sie scheinen eine Gliederung CSS zu fehlen. Ich nehme an, der Code ist auch unvollständig, da ich zumindest kein "body" -Tag sehe. Hinweis: Wenn Sie über eine CSS-Gliederung verfügen und diese nicht eingeschlossen haben, könnte dies auch Ihr Problem sein.

Towards Ausrichtung, können Sie "margin (- *): [Abstand] [Einheit];" verwenden? Oder "align =" [Mitte, rechts, gerechtfertigt, etc]“