html - Bootstrap 导航栏 : brand on left - login on right - collapsible menu on center

标签 html css twitter-bootstrap twitter-bootstrap-3 navbar

我想创建一个包含 3 个部分的导航栏:右侧的品牌 Logo 、左侧的登录按钮和居中的可折叠菜单:

桌面:

navbar desktop

手机:

navbar mobile

Demo on bootply

我对当前的结果有一些疑问:

  1. 无法将菜单居中对齐
  2. 我希望折叠按钮转到页面的另一侧(针对品牌)
  3. 折叠按钮(扩展菜单)无法正常工作。 (见下面的演示和图片)

这是展开的菜单: enter image description here

这几天我一直在为此苦苦挣扎。我已经尝试了很多东西。这是我最艰难的尝试。

最佳答案

感谢 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/

相关文章:

ios - 如何禁用 WebKit View 底部的工具栏

HTML/CSS - 右对齐和左对齐在同一行上?

css - 混合普通页面 css 与 ember handlebar css

html - 在浏览器开发人员工具的“网络”标签下查看页面预览时,缺少CSS样式

javascript - 如何在页面加载时滚动到某个 Div

javascript - Bootstrap 输入组大小

javascript - 嵌入 Flash 对象透明度问题

jquery - Bootstrap-slider 自定义句柄

javascript - 使用handlebars.js时创建新的 Bootstrap 行

html - 对齐 float 内容