我想创建一个包含 3 个部分的导航栏:右侧的品牌 Logo 、左侧的登录按钮和居中的可折叠菜单:
桌面:
手机:
我对当前的结果有一些疑问:
- 无法将菜单居中对齐
- 我希望折叠按钮转到页面的另一侧(针对品牌)
- 折叠按钮(扩展菜单)无法正常工作。 (见下面的演示和图片)
这几天我一直在为此苦苦挣扎。我已经尝试了很多东西。这是我最艰难的尝试。
最佳答案
感谢 Sunil Gehlot,我解决了它。高度问题是因为这个:
.navbar {
height: 60px;
}
我改成了这样:
.navbar {
min-height: 60px;
}
为了定位登录按钮,我使用了绝对定位:
.loginStatus{
position: absolute;
right:10px;
top:10px;
}
@media (min-width: 200px){
.loginStatus{
right:100px;
}
}
@media (min-width: 768px){
.loginStatus{
right:10px;
}
}
我希望菜单项在桌面上居中,在移动设备上通常对齐:
@media (min-width: 768px){
.navbar-nav{
text-align:center;
}
.navbar-nav {
float: none !important;
margin: 0;
}
.navbar-nav > li {
float: none !important;
display:inline-block !important;
}
}
Full Demo
关于html - Bootstrap 导航栏 : brand on left - login on right - collapsible menu on center,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34103481/