Bootstrap 5导航栏右对齐项目答案

【问题标题】：Bootstrap 5 navbar align items rightBootstrap 5导航栏右对齐项目
【发布时间】：2025-11-29 10:00:01
【问题描述】：

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

【问题讨论】：

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

引导程序 5（2021 年更新）

从 Bootstrap 5 beta 开始，left 和 right 已被 start 和 end 替换为 RTL support。因此，Bootstrap 5 beta 的保证金工具发生了变化：

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

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

ml-* => ms-*
pl-* => ps-*
先生-* => 我-*
pr-* => pe-*
text-left => text-start
text-right=> 文本结束
float-left => 浮动开始
float-right=> 浮动端
border-left => 边框开始
border-right=>border-end
左圆角 => 圆角开始
右圆角=>圆角末端
dropleft => dropstart
dropright=>dropend
下拉菜单--left => 下拉菜单--开始
下拉菜单--right => 下拉菜单--end
carousel-item-left => carousel-item-start
carousel-item-right=> carousel-item-end

Bootstrap 5 alpha（原始答案）

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

Align nav items to right in Bootstrap 5

【讨论】：

【解决方案2】：

我将mr 更改为ms，它对我有用，这是最好的解决方案。

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

【讨论】：

你拯救了我的一天。

【解决方案3】：

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

对水平方向敏感的变量、实用程序和 mixin 使用更多逻辑名称重命名 — start 和 end 代替 Bootstrap 5 中的 left 和 right。

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

【讨论】：

【解决方案4】：

这个问题已经回答here

为了更清楚地说明，根据 Bootstrap 5 文档，一些实用程序已重命名。包括左右。

左 ==> 开始

右 ==> 结束

因此

ml 已更改为 ms

mr 已更改为 me

所以现在：

ml-auto ==> ms-auto

mr-auto ==> me-auto

你可以在引导文档中看到这个here

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

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

【讨论】：

【解决方案5】：

它与 Bootstrap 4 相同，您应该使用 ml-auto。这是来自的sn-p。 Navbar Bootstrap 5 offical 这是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>

编辑

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

【讨论】：

它没有。请查看getbootstrap.com/docs/5.0/migration/#utilities
好的，我改变了答案我在引导程序处于 alpha 时回答了这个问题。我确实将答案更新到了新版本。谢谢。

【解决方案6】：

对于那些面临类似需求的人，

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

justify-content-end 类与众不同。

【讨论】：

【解决方案7】：

我给了我的<div class="collapse navbar-collapse" id="navLinks"> 一个#id。然后在css中，我使用了#navLinks {justify-content:flex-end;}的id。工作得很好。只需运行代码并执行整页。

body {
    background: #f5d9d5;
}

#navLinks { 
    justify-content: flex-end;
}

#home, #about, #portfolio, #testimonials {
    margin: 2em 1em 0 1em;
    font-size: large;
}

#brand_name {
    font-size: 1.75em;
    font-weight: 500;
    padding-top: 4vh;
}

#bavbar-button {
    align-items: flex-end;
}

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
        <!--Custom CSS-->
    <link rel="stylesheet" href="KT.css">

    <title>My_portofolio_home</title>
</head>
 
<body>

    <header>

        <!--navbar as a link-->
        <nav id="mainNavbar" class="navbar navbar-expand-sm navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand" href="#" target="_blank" id="brand_name">AI</a>
               <!--toggle_button-->
                <button class="navbar-toggler" id="navbar-button" type="button" data-bs-toggle="collapse" data-bs-target="#navLinks" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button> 
                <!--navbar options/buttons-->
                <div class="collapse navbar-collapse" id="navLinks">
                    <div class="navbar-nav">                        
                            <a class="nav-link active" aria-current="page" href="" id="home">Home</a>
                            <a class="nav-link" href="#" id="about">About</a>
                            <a class="nav-link" href="KT_portfolio.html" id="portfolio">Portfolio</a>
                            <a class="nav-link" href="KT_testimonials.html" id="testimonials">Testimonials</a>                       
                    </div>
                </div>

            </div>
        </nav>

    </header>


    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>

</html>

【讨论】：

虽然您的回答可能会解决问题，但 including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。您可以编辑您的答案以添加解释并指出适用的限制和假设。 - From Review
你是对的 :( 几天前我刚开始 Web 开发，对事物的工作原理和原因零经验。我想出了这个解决方案，只需尝试不同的命令。我会尝试在以后的帖子中给出更全面的解释。

【解决方案8】：

将 mr-auto 替换为 ms-auto

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

【讨论】：

您好，欢迎来到 SO！请阅读tour 和How do I write a good answer? 例如，您可以详细说明此类更改将做什么。
我认为你错了。 mr-auto 应该替换为 me-auto。 r(right) 被 e(end) 替换，l(left) 被 s(start) 替换。

【解决方案9】：

作为替代方法，您可以尝试使用 flex：

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

【讨论】：