Bootstrap 4 Navbar元素对齐问题求助：右侧对齐与切换按钮异常

我刚帮你梳理了代码里的问题，主要是Navbar宽度没拉满、切换按钮没设置靠右样式导致的。下面是修复后的方案，我会逐点解释改动：

修复后的完整代码 #

<div class="container">
  <nav class="navbar navbar-expand-md navbar-light w-100">
    <a class="navbar-brand" href="#">Navbar</a>
    <!-- 给切换按钮添加ml-auto，让它靠右 -->
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbarText">
      <!-- 第一个ul保持默认布局 -->
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <!-- 第二个ul用ml-auto实现右侧对齐 -->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Register</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

关键改动说明 #

• 给<nav>标签添加w-100类：这个类让Navbar占满父容器的100%宽度，之前你的Navbar宽度不足，导致ml-auto没有足够空间把第二个<ul>推到右侧，现在这个问题就解决了。
• 给切换按钮添加ml-auto类：自动左侧外边距会把按钮推到Navbar最右侧，解决了它紧邻品牌文本的问题。
• 保留第二个<ul>的ml-auto：现在Navbar是全宽状态，这个类能正常生效，把Login/Register链接对齐到页面右侧。

另外，你之前套的<div class="row">其实没必要，Navbar本身就是flex布局，去掉它能减少不必要的层级，不影响布局效果。

如果还是有异常，记得检查是否正确引入了Bootstrap 4的CSS、jQuery和Popper.js文件——折叠功能依赖这两个JS库，缺少的话可能会导致布局或交互失效哦。

内容的提问来源于stack exchange，提问作者Ryan