Bootstrap 4 Beta：将导航栏两个折叠按钮右对齐并排显示

嗨，我刚好遇到过类似的情况，其实只需要调整一下按钮的布局结构就能解决！核心思路是把两个切换按钮放进一个弹性布局容器里，同时让这个容器靠右对齐，这样折叠状态下它们就能并排显示了。

下面是修改后的完整代码，我标注了关键修改点：

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
  <div class="container">
    <a class="navbar-brand logo-font" href="#"> Brand </a>
    
    <!-- 关键：把两个切换按钮包裹在这个弹性容器里 -->
    <div class="ml-auto d-flex">
      <!-- links toggle -->
      <button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#links" aria-controls="links" aria-expanded="false" aria-label="Toggle links navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- account toggle -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#account" aria-controls="account" aria-expanded="false" aria-label="Toggle account navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    
    <div class="collapse navbar-collapse" id="links">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 5</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Dropdown 1</a>
            <a class="dropdown-item" href="#">Dropdown 2</a>
            <a class="dropdown-item" href="#">Dropdown 3</a>
          </div>
        </li>
      </ul>
    </div>
    
    <div class="collapse navbar-collapse" id="account">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
      </ul>
    </div>
  </div>
</nav>

为什么这样修改能生效？ #

• <div class="ml-auto d-flex">：这个容器是核心解决点：
  • ml-auto：给容器添加左侧自动边距，直接把整个按钮组推到导航栏的最右侧，解决你说的“左侧按钮无法右移”的问题。
  • d-flex：启用Bootstrap的弹性布局，让容器内的两个按钮横向并排，而不是默认的上下堆叠。
• mr-2：给第一个按钮加了右边距，让两个按钮之间有适当的空隙，视觉上更舒服。
• 顺便修正了aria-controls属性：原来的navbarResponsive和折叠容器的ID不匹配，现在改成对应的links和account，这是无障碍访问的最佳实践。

这样调整后，在屏幕宽度小于lg的折叠状态下，两个切换按钮就会整齐地并排显示在导航栏右侧啦！

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