Bootstrap 5中ms-auto无法将导航栏无序列表右移的问题排查

Let’s break down the issue you’re facing clearly:

The core problem here is a version mismatch between the Bootstrap framework you’re loading and the class you’re trying to use.

You’ve included Bootstrap 4 CDN files in your HTML, but ms-auto is a class introduced in Bootstrap 5. In Bootstrap 4, the equivalent class for pushing elements to the right in a navbar is ml-auto (short for "margin-left: auto"). Since Bootstrap 4 doesn’t recognize ms-auto, it doesn’t apply any styling to your navbar list—hence why you’re not seeing the expected right-alignment.

Fixes you can implement: #

Option 1: Upgrade to Bootstrap 5

If you want to use ms-auto, update your Bootstrap CDN links to version 5. Bootstrap 5 also removes dependencies on jQuery and Popper.js (they’re bundled into the Bootstrap JS file now), so you can simplify your script imports:

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap 5 JS (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Keep using ms-auto on your .navbar-nav element, and it will work as expected.

Option 2: Use Bootstrap 4-compatible class

If you need to stick with Bootstrap 4 for your project, replace ms-auto with ml-auto on your unordered list:

<ul class="navbar-nav ml-auto">

This will apply margin-left: auto to the list, pushing it to the right side of the navbar container.

Quick side note: #

I noticed you’re using navbar-item for your list items—this is a typo! The correct class in both Bootstrap 4 and 5 is nav-item. Fixing that will ensure your list items inherit proper navbar styling:

<li class="nav-item">
    <a href="#learn" class="nav-link">What You'll Learn</a>
</li>

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