バーガーバー（メニューバー）の横にあるインラインメニューリストを移動する方法

Question

ページの右側にあるバーガーバーの隣にインラインメニューを移動しようとしています。私はbootsrtapを使用していますが、下の画像はどのようにメニューを表示したいのですか？ユーザーがバーガーバーをクリックすると、メニューはバーガーバーの左側に表示されます。現時点では、メニューバーの下にドロップされます。ここにはブートスニップhttp://bootsnipp.com/user/snippets/M3gdXの例があります。以下は

私のコード（HTML）である：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="/"><img id="header-image">Logo</a>   
</div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      <div class="menu-bar"></div> 
      <div class="menu-bar"></div> 
      <div class="menu-bar"></div> 
      </a> 
      <ul class="dropdown-menu" id="number-list"> 
      <ul class="list-inline"> 
     <li class="active"><a href="index.html">Home</a></li> 
     <li><a href="blog.html">Blog</a></li> 
     <li><a href="gallery.html">Gallery</a></li> 
     <li><a href="about.html">About</a></li>        
     <li><a href="contact.html">Contact</a></li> 
     </ul> 
    </ul> 
    </li> 
    </ul> 
    </div> 
</nav> 

CSSコード：

.menu-bar { 
width: 22px; 
height: 2px; 
background-color: white; 
margin: 6px ; 
border-radius: 1px; 
} 
#number-list.dropdown-menu { 
width: 300px; 
} 
.dropdwon-toggle { 
margin-right: 10px; 
} 

私はこれに新しいですし、どこかの例を見つけることができないようページをスライドさせたりページに来たりしないドロップ左メニューの

Answer 1

float：leftをli要素に設定して、1行に水平にすることができます。

<ul class="list-inline lefties"> 

    <li class="active lefties-item"> 
     <a href="index.html">Home</a> 
    </li> 

    <li class="lefties-item"> 
     <a href="blog.html">Blog</a> 
    </li> 

    <li class="lefties-item"> 
     <a href="gallery.html">Gallery</a> 
    </li> 

    <li class="lefties-item"> 
     <a href="about.html">About</a> 
    </li>  

    <li class="lefties-item"> 
     <a href="contact.html">Contact</a> 
    </li> 
</ul> 

CSS

ul.lefties:after { 
     clear: both; 
     display: block; 
     content: ""; 
    } 

.lefties-item { 
    float: left; 
}