如何使 bootstrap 导航栏右拉项与导航栏正确对齐

Question

我目前拥有的：

https://jsfiddle.net/st589n9j/show/

它在桌面视图上工作得很好，我想要它在桌面视图上的效果。

但对于移动视图，它显示为：

而我想要的是：

我尝试了各种移动导航栏 div 元素的方法，但它只会变得更乱，我无法修复它。

我期待的方式是用户图标不会合并到可折叠菜单中，但如果可以通过删除用户图标和自动展开下拉项目将其合并到菜单中来完成，那么我愿意那个选项。

我试着按照 fiddle 在这里做： http://jsfiddle.net/nomis/n9KtL/1/

但是在执行此操作时，可折叠菜单不会折叠。

对不起，如果看起来很愚蠢，我的设计知识太少了。

HTML:

切换导航工具箱

<div class="navbar-header pull-right">
    <ul class="nav navbar-nav pull-left">
        <li class="dropdown pull-right">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>
              <a href="/users/id" title="Profile">Profile</a>
            </li>
            <li>
              <a href="/logout" title="Logout">Logout </a>
            </li>
          </ul>
        </li>
    </ul>
</div>

<div id="navbar" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div><!-- /.nav-collapse -->

Fiddle 为代码： https://jsfiddle.net/st589n9j/

Answer 1

删除所有折叠 class 并删除当您将其调整为移动视图时显示的按钮。

如果您想让菜单项保持内联，则可以通过添加自己的 class 覆盖 bootstrap 中的导航栏 class，或者您可以更改 bootstrap 的 css 文件。

 <nav class="navbar navbar-fixed-top navbar-default">
      <div class="container">
        <div class="navbar-header">

          <a class="navbar-brand" href="#">Toolbox</a>
        </div>

        <div class="navbar-header pull-right">
            <ul class="nav navbar-nav pull-left">
                <li class="dropdown pull-right">
                  <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="/users/id" title="Profile">Profile</a>
                    </li>
                    <li>
                      <a href="/logout" title="Logout">Logout </a>
                    </li>
                  </ul>
                </li>
            </ul>
        </div>

        <div id="navbar" class="">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

Answer 2

我在 CODEPEN

创建了示例代码

希望这能解决您的问题。

HTML:

<nav class="navbar navbar-fixed-top navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      <a class="navbar-brand" href="#">Toolbox</a>
    </div>

    <div class="nav navbar-header navbar-profile  pull-right">
      <ul class="nav">
        <li class="dropdown ">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>
              <a href="/users/id" title="Profile">Profile</a>
            </li>
            <li>
              <a href="/logout" title="Logout">Logout </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!-- /.nav-collapse -->
  </div>
  <!-- /.container -->
</nav>
<!-- /.navbar -->

CSS:

.navbar-profile ul.nav > li > a {
  color: #777;
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 20px;
}

.navbar-profile ul.nav > li .dropdown-menu {
  right: 0;
  left: auto;
}

@media (max-width: 767px) {
  .navbar-profile {
    position: absolute;
    display: inline-block;
    width: auto;
    right: 80px;
    top: 0;
    text-align: center;
    margin: auto;
  }
}

尽情享受吧:)

如何使 bootstrap 导航栏右拉项与导航栏正确对齐

How to make bootstrap navbar right-pulled items align correctly into navbar

html

css

navbar

responsive-design

twitter-bootstrap