Bootstrap 5 navbar align items right

问题

How do you align Bootstrap 5 navbar items to the right? In Bootstrap 3 it's navbar-right. In Bootstrap 4 it's ml-auto. But not work for Bootstrap 5.

回答1:

This question was asked for Bootstrap 5 alpha, and therefore ml-auto should still work.

As of Bootstrap 5 beta (Dec 2020), left and right have been replaced by start and end for RTL support. Therefore the margin utilities changed for Bootstrap 5 beta:

ml-auto => ms-auto
mr-auto => me-auto

Align nav items to right in Bootstrap 5

回答2:

You need to use ms-auto instead of ml-auto in bootstrap 5.

Horizontal direction sensitive variables, utilities and mixins are renamed with more logical names — start and end in lieu of left and right in Bootstrap 5.

Renamed .left-* and .right-* to .start-* and .end-*.
Renamed .float-left and .float-right to .float-start and .float-end.
Renamed .border-left and .border-right to .border-start and .border-end.
Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end.
Renamed .ml-* and .mr-* to .ms-* and .me-*.
Renamed .pl-* and .pr-* to .ps-* and .pe-*.
Renamed .text-left and .text-right to .text-start and .text-end.

You can see more bootstrap 5 migration details here: https://getbootstrap.com/docs/5.0/migration/#sass

回答3:

I changed mr to ms and it worked for me, this is the best solution.

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">

回答4:

Replace mr-auto with ms-auto

This worked for me, hope it helps you :)

回答5:

It is the same as Bootstrap 4 you should use ml-auto. Here is a snippet from. Navbar Bootstrap 5 offical And here is the official home page for Bootstrap 5

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">



<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse " id="navbarNavAltMarkup">
      <!-- ml-auto still works just fine-->
      <div class="navbar-nav ml-auto">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>


<!--bootstrap 5 -->
<!-- JavaScript and dependencies -->
<script src=" https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js " integrity=" sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo " crossorigin=" anonymous "></script>
<script src=" https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js " integrity=" sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/ " crossorigin=" anonymous "></script>

Edit

The question was asked when bootstrap 5 was in alpha. But right now we have beta out and they did change the naming to be margin-start and margin-end

Renamed .ml-* and .mr-* to .ms-* and .me-*

Renamed .pl-* and .pr-* to.ps-* and .pe-*

So the answer should be like this:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">



<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>


<!--bootstrap 5 -->
<!-- JavaScript and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

来源：https://stackoverflow.com/questions/63948287/bootstrap-5-navbar-align-items-right

标签

twitter-bootstrap

bootstrap-5