サイドバーの横にヘッダーバーを配置する

Question

私はブートストラップを使用しています。サイドバーの右側にヘッダーバーを追加して、横に並べるようにします。サイドバーも折りたたみ可能なので、サイドバーが折りたたまれたらヘッダーはページ全体に広がっていなければなりません。

サイドバーコード：あなたのマークアップに、既に構築された列クラスを追加しないでくださいなぜあなたはすでに、ブートストラップを使用していると見て

<!-- Sidebar --> 
    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
      <li class="sidebar-brand"> 
       <a href="#"> 
        Start Bootstrap 
       </a> 
      </li> 
      <li> 
       <a href="#">Dashboard</a> 
      </li> 
      <li> 
       <a href="#">Shortcuts</a> 
      </li> 
      <li> 
       <a href="#">Overview</a> 
      </li> 
      <li> 
       <a href="#">Events</a> 
      </li> 
      <li> 
       <a href="#">About</a> 
      </li> 
      <li> 
       <a href="#">Services</a> 
      </li> 
      <li> 
       <a href="#">Contact</a> 
      </li> 
     </ul> 
    </div> 
    <!-- /#sidebar-wrapper --> 

Answer 1

。ブートストラップCSSが含まれていることを確認してください。

あなたのヘッダーに続いて

<div id="sidebar-wrapper" class="col-lg-3">

...またちょうどペンをした

<div id="header-wrapper" class="col-lg-9">

found here

それとして、列クラスを利用することをお勧めだろうレスポンシブルなデザインを容易にします。

Answer 2

デフォルトのナビゲーションバーで、ラッパー内に配置してサイドバーのnav divの下に配置することで、余分な配置が不要になりました。