Navbarのボタングループが正しくアライメントされていません

Question

左側に表示されるナビゲーションバーを作成しようとしていますが、残りのコンテンツは右側に表示されます。問題は、ナビゲーションバーのボタングループがnavbar-headerと同じセクションにないことです。ナビゲーションバーのボタンを左側のナビゲーションバーのヘッダーと垂直に整列させたいが、今はお互いにオーバーラップしているだけだ。それだけでなく、ボタングループがnavbar-headerと残りのHTMLコンテンツとの間に座っている/重なっているように見えます。

私はこれを修正するために私を指すことができるすべての助けに感謝します！ありがとうございました！

<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

まず、アウトラインCSSがありません。 "body"タグが少なくとも表示されないので、コードも不完全であると思います。注意してください。アウトラインCSSを持っていて、それを含めなかった場合は、それがあなたの問題かもしれません。アライメントに向けて

、あなたは "マージン（ - *）：[距離] [単位];" を使用することができ、またはあなたのCSSがある場合、[センター、右、正当化、など]」