Html 如何使引导navbar右拉项目与navbar正确对齐

我目前拥有的：

它在桌面视图上工作得非常好，我想要它，因为它是桌面视图

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

我想要的是：

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

我期待的方式是，用户图标不会被合并到可折叠菜单中，但如果可以通过删除用户图标和自动扩展下拉项在菜单中合并它，那么我愿意接受该选项

我试着在这里按小提琴演奏：

但在执行此操作时，可折叠菜单的折叠方式不同

对不起，如果这看起来很愚蠢，我的设计知识非常少

HTML:

切换导航 工具箱

拨弄代码：

---

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

如果您想保持菜单项的内联，那么您可以通过添加自己的类来覆盖引导中的navbar类，也可以对引导的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 -->

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

如果您想保持菜单项的内联，那么您可以通过添加自己的类来覆盖引导中的navbar类，也可以对引导的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 -->

我在

我希望这能解决你的问题

HTML:

---

享受：）

我在

我希望这能解决你的问题

HTML:

---

享受：）

您在移动视图上删除了整个用户图标项目，那么用户将如何在移动视图上访问这些项目？另外，我不希望可折叠菜单在移动视图上自动折叠如果在移动视图上删除了整个用户图标项，那么用户将如何在移动视图上访问这些项？另外，我不希望可折叠菜单在移动视图上自动折叠这看起来不错，但用户图标变为蓝色，单击它，下拉菜单将从屏幕上消失。这能解决吗？这基本上解决了问题，尽管非常感谢！这就是css问题可以很容易地解决，只需很少的填充、边距和定位。我希望你能理解。不知道这是否是最优雅的方式，但我通过添加样式“颜色：#777；页边顶部：5px；”和在其li上添加类拉力来修复它。谢谢你的帮助。如果你相信可以做得更好，一定要让我知道：PI已经更新了代码，检查了链接非常感谢Jyoti，这是完美的现在！这看起来不错，但用户图标变为蓝色，点击它，下拉菜单将从屏幕上消失。这能解决吗？这基本上解决了问题，尽管非常感谢！这就是css问题可以很容易地解决，只需很少的填充、边距和定位。我希望你能理解。不知道这是否是最优雅的方式，但我通过添加样式“颜色：#777；页边顶部：5px；”和在其li上添加类拉力来修复它。谢谢你的帮助。如果你相信可以做得更好，一定要让我知道：PI已经更新了代码，检查了链接非常感谢Jyoti，这是完美的现在！

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

.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;
  }
}