使用Bootstrap 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; 
}