モバイルでブートストラップNavbarを使用してコンテンツを整列する

Question

私は自分のページに非常に簡単なナビゲーションバーを作成しようとしています。モバイルデバイスのナビゲーションバーの右側にコンテンツを配置する際に問題があります。私はどんな種類の崩壊や何かをしようとしていない、私はちょうどデスクトップのバージョンのように見えるようにモバイルのナビゲーションバーをしたい。

私の問題は、モバイルデバイス上で、私の右揃え内容はとてもように私のヘッダーの下に表示されている：私は今、デスクトップ上でそれを持ってどのように

Mobile

Desktop

は、どのように私はかなりありますそれは大いに欲しい。私は縦にすぎナビゲーションバーのボタンを揃えたいのですが、私はその部分の世話をすることができます：

ここに私のコードです：

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <a href="#" class="navbar-brand">Favorite List</a> 
     </div> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><button type="button" class="btn btn-default">Default</button></li> 
     <li><button type="button" class="btn btn-default">Default</button></li> 
     <li><button type="button" class="btn btn-default">Default</button></li> 
     </ul> 
    </div> 
    </nav> 

Answer 1

私はこれを修正しています。

使用のモバイルビューのためのあなたの応答で、このCSS：

.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header { 
    margin-right: -15px; 
    margin-left: -15px; 
    display: inline-block; 
    float: left; 
} 

.navbar-nav { 
    margin: 7.5px -15px; 
    display: block; 
    float: right; 
} 

.nav>li { 
    position: relative; 
    display: inline-block; 
} 
.navbar-default .navbar-brand { 
    color: #777; 
    font-size: 15px; 
}