Bootstrap新手求助：如何将导航栏内的div右对齐

Hey there! Since you're new to Bootstrap, let's figure out how to right-align those two page links in your navbar without writing custom CSS. The approach depends on which Bootstrap version you're using—here are the solutions for the most common versions:

Bootstrap 3 #

In Bootstrap 3, the pull-right class works, but you need to apply it to the navigation list (the <ul>) instead of the collapse div. Alternatively, use the dedicated navbar-right class for navbar elements:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Navbar Brand & Toggle Button -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-links">
        <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="#">Your Brand</a>
    </div>

    <!-- Collapsible Nav Links -->
    <div class="collapse navbar-collapse" id="navbar-links">
      <!-- Use navbar-right to push this list to the right -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/page1">Page 1</a></li>
        <li><a href="/page2">Page 2</a></li>
      </ul>
    </div>
  </div>
</nav>

Bootstrap 4 #

Bootstrap 4 uses flexbox for layout, so float-based classes like float-right won't work on flex container children. Instead, use ml-auto (margin-left: auto) on the navigation list—this pushes the links to the right by taking up all available left margin:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-links">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar-links">
    <!-- ml-auto pushes the nav to the right -->
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="/page1">Page 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/page2">Page 2</a>
      </li>
    </ul>
  </div>
</nav>

Bootstrap 5 #

Bootstrap 5 replaces direction-specific classes with logical properties. Use ms-auto (margin-start: auto) instead of ml-auto, or apply justify-content-end directly to the collapse div to align all its content to the right:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-links">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Option 1: Align entire collapse content to right -->
  <div class="collapse navbar-collapse justify-content-end" id="navbar-links">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="/page1">Page 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/page2">Page 2</a>
      </li>
    </ul>
  </div>

  <!-- Option 2: Push just the nav list to right -->
  <!-- <div class="collapse navbar-collapse" id="navbar-links">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="/page1">Page 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/page2">Page 2</a>
      </li>
    </ul>
  </div> -->
</nav>

Why Your Previous Attempts Didn't Work #

• pull-right is a Bootstrap 3 class and is deprecated in newer versions.
• float-right doesn't work in Bootstrap 4+ because the navbar and collapse div use flexbox layout—float properties are ignored in flex containers.
• to-right isn't a native Bootstrap class at all.

Pick the solution that matches your Bootstrap version, and you'll have those links aligned right without any custom CSS!

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