使用Bootstrap Navbar在手机上对齐内容
问题描述:
我正在尝试在我的页面上创建一个非常简单的导航栏。我无法对齐移动设备上导航栏右侧的内容。我没有试图做任何形式的折叠或任何事情,我真的只想让移动导航栏看起来就像桌面版。使用Bootstrap Navbar在手机上对齐内容
我的问题是在移动设备上,我的右对齐的内容出现我的头下,像这样:
如何我有它在桌面上,现在是我多么漂亮很想要它。我想垂直对齐的导航栏的按钮太多,但我可以把那部分的护理:
这里是我的代码:
<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>
答
我解决了这个问题。
使用这个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;
}
尝试把'风格= “显示:inline-block的”'在最外面的'div' –
没有工作。刚刚结束对齐桌面版本中导航栏标题旁边的按钮 –