Bootstrap navbar：左侧的品牌 - 右侧登录 - 中心的可折叠菜单

Question

我想创建一个包含3个部分的导航栏：右侧是品牌标识，左侧是登录按钮，还有一个居中的可折叠菜单：

桌面：

移动：

Demo on bootply

我对当前结果有一些问题：

1. 无法在中心对齐菜单
2. 我希望折叠按钮转到页面的另一侧（针对品牌）
3. 折叠按钮（展开的菜单）无法正常工作。 （参见下面的演示和图片）

这是展开的菜单：

我正在努力解决这个问题。我尝试了很多东西。这是我最艰难的尝试。

Answer 1

希望它有所帮助。

我在text-center上添加了ul课程，我在css下面使用过。

.navbar-nav {
    float: none !important;
    margin: 0;
}
@media (min-width: 768px){
.navbar-nav > li {
    float: none !important;
  display:inline-block !important;
}
}

请查看here并告知我们。

由于

Answer 2

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