Bootstrap 5 导航栏右对齐项目

Question

如何将 Bootstrap 5 导航栏项目向右对齐？在 Bootstrap 3 中，它是navbar-right. 在 Bootstrap 4 中，它是ml-auto. 但不适用于 Bootstrap 5。

Answer 1

Bootstrap 5（2021 年更新）

自举5测试版的，左右已被替换的开始和结束的RTL支持。因此，Bootstrap 5 beta 的保证金实用程序发生了变化：

• ml-auto=> ms-auto（开始）
• mr-auto=> me-auto（结束）

另请注意，在 Bootstrap 5 中，left 和 right 的所有用法都已替换为start和end ...

• 毫升-* => 毫秒-*
• pl-* => ps-*
• 先生-* => 我-*
• pr-* => pe-*
• 文本左 => 文本开始
• 文本右 => 文本结束
• 浮动左 => 浮动开始
• 浮动右 => 浮动结束
• 边界左 => 边界开始
• 边界右=> 边界结束
• 圆形左 => 圆形开始
• 圆角右 => 圆角末端
• dropleft => dropstart
• dropright=> dropend
• 下拉菜单- -left => 下拉菜单- -start
• 下拉菜单- -right => 下拉菜单- -end
• carousel-item-left => carousel-item-start
• carousel-item-right=> carousel-item-end

Bootstrap 5 alpha（原始答案）

这个问题是针对Bootstrap 5 alpha 提出的，因此ml-auto应该仍然有效。

在 Bootstrap 5 中将导航项向右对齐

Answer 2

我改mr到ms和它的工作对我来说，这是最好的解决方案。

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

Answer 3

您需要在引导程序 5 中使用ms-auto而不是ml-auto。

水平方向敏感的变量，公用事业和混入被重命名为更符合逻辑的名字-start和end代替left，并right在引导5。

• 更名.left-*并.right-*以.start-*和.end-*。
• 更名.float-left并.float-right以.float-start和.float-end。
• 更名.border-left并.border-right以.border-start和 .border-end。
• 更名.rounded-left并.rounded-right以.rounded-start和 .rounded-end。
• 更名.ml-*并.mr-*以.ms-*和.me-*。
• 更名.pl-*并.pr-*以.ps-*和.pe-*。
• 更名.text-left并.text-right以.text-start和.text-end。

您可以在此处查看更多 bootstrap 5 迁移详细信息：https : //getbootstrap.com/docs/5.0/migration/#sass

Answer 4

justify-content-end 类发挥了作用。

<div class="collapse navbar-collapse justify-content-end" id="navbarResponsive">

Answer 5

这个问题已经在这里得到解答

为了获得更多说明，根据Bootstrap 5 文档，一些实用程序已重命名。包括左和右。

左==>开始

右==>结束

所以

ml已更改为ms

mr已经变成了我

所以现在：

ml-自动 ==> ms-自动

mr-auto ==> me-auto

你可以在引导文档中看到这一点

因此，如果您希望导航栏项目“右”对齐，则必须输入：

 <div class="collapse navbar-collapse" id="navbarScroll">
  <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</div>

Answer 6

它与您应该使用的 Bootstrap 4 相同ml-auto。这是来自的一个片段。导航栏 Bootstrap 5 官方 这里是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>

编辑

问题是bootstrap 5在时问的alpha。但现在我们已经beta出来了，他们确实将命名更改为 margin-start 和 margin-end

将 .ml-* 和 .mr-* 重命名为 .ms-* 和 .me-*

将 .pl-* 和 .pr-* 重命名为 .ps-* 和 .pe-*

所以答案应该是这样的：

<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>