Question

我现在有什么：

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

它在桌面视图上运行得非常好，我希望它与桌面视图一样。

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

我想要的是：

我尝试了移动导航栏div元素的各种各样的东西，但它只是变得更加混乱，我无法解决它。

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

我试着在这里按照小提琴这样做： 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 -->

代码小提琴： https://jsfiddle.net/st589n9j/

Answer 1

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

如果要将菜单项保持为内联，则可以通过添加自己的类来覆盖引导程序中的navbar类，也可以更改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;
  }
}

享受：）

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

2 个答案: