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