Bootstrap 5导航栏对齐项靠右

Question

Bootstrap 5导航栏对齐项靠右

twitter-bootstrapbootstrap-5

126

如何将Bootstrap 5导航栏项目对齐到右侧？在Bootstrap 3中可以使用navbar-right实现，在Bootstrap 4中可以使用ml-auto实现。但是在Bootstrap 5中这些方法都不起作用。

- bs5alpha

13个回答

131

我将mr-auto更改为ms-auto，这对我起了作用，这是最好的解决方案。

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

- U.Aasd

3

我很困惑，ms-auto 的意思是对齐到开始（左侧），但在我的情况下它实际上将项目对齐到右侧... 我觉得我疯了。 - Francisco

2

@Francisco 当有疑问时，看看引擎盖下面。ms-auto的确意味着“边距_开始_/左自动”，但是这意味着“添加margin-left: auto !important;”，这本身就令人困惑，但您可以在此处阅读更多有关边距的信息 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left#syntax - Andrew E

为我工作过。同意，这没什么道理，我只是需要它能够工作。 - Harlin

31

在Bootstrap 5中，您需要使用ms-auto替代ml-auto。

水平方向敏感变量、工具和混合物采用更符合逻辑的名称进行重命名——在Bootstrap 5中，left和right改为start和end。

.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

- HDP

17

justify-content-end类有所不同。

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

- ozeray

这很简单而且有效。 - Sabel

为什么只有这个带有导航栏的解决方案在5.0.3 alpha版本上有效？ - Bogdan Mind

9

这个问题已经在这里得到了回答。

根据Bootstrap 5文档的内容，某些工具已经更名，包括left和right。

left ==> start

right ==> end

因此：

ml变为ms

mr变为me

现在：

ml-auto ==> ms-auto

mr-auto ==> me-auto

你可以在这里的Bootstrap文档中查看。

因此，如果您想要使导航栏项目靠“右”对齐，则必须添加：

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

- legacy

5

与 Bootstrap 4 相同，您应该使用 ml-auto。以下是来自 Bootstrap 5 官方 Navbar 的代码片段。

此外，这里还有 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>

- Ahmad Dalao

它不会。请查看https://getbootstrap.com/docs/5.0/migration/#utilities - abyshukla

1

好的，我改变了答案。当 Bootstrap 还处于 alpha 版本时，我回答了这个问题。我已经更新了答案到新版本。谢谢。 - Ahmad Dalao

4

这个对我来说很好用，

看看这个：

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

- gilzonme

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

2

作为另一种方法，您可以尝试使用flex：

 <nav class="navbar navbar-dark bg-dark d-flex justify-content-end">

- Çetin

2

这对我有用：

<div class="d-flex flex-row-reverse">

- Umair Sultan

2

将mr-auto替换为ms-auto

这对我有用，希望能对你有所帮助 :)

- Okhellohey

1

你好，欢迎来到SO！请阅读tour和如何撰写优秀答案？例如，您可以详细说明这样的更改会产生什么影响。 - Tomer Shetah

1

我认为你错了。mr-auto 应该被 me-auto 替换。r（right）被替换为 e（end），l（left）被替换为 s（start）。 - Irfan wani

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

Bootstrap 5 (2021年更新)

从Bootstrap 5 beta版本开始，RTL支持中的左和右已被替换为start和end。因此，Bootstrap 5 beta的边距工具发生了变化：

ml-auto => ms-auto（start）
mr-auto => me-auto（end）

还请注意，在Bootstrap 5中，所有使用左和右的情况都已被替换为start和end...

ml-* => ms-*
pl-* => ps-*
mr-* => me-*
pr-* => pe-*
text-left => text-start
text-right=> text-end
float-left => float-start
float-right=> float-end
border-left => border-start
border-right=> border-end
rounded-left => rounded-start
rounded-right=> rounded-end
dropleft => dropstart
dropright=> dropend
dropdown-menu-left => dropdown-menu-start
dropdown-menu-right => dropdown-menu-end
carousel-item-left => carousel-item-start
carousel-item-right=> carousel-item-end

Bootstrap 5 alpha（原始答案）

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

如何在Bootstrap 5中将导航项右对齐？