twitter-bootstrap - Bootstrap 5导航栏右对齐项目

Question

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

score 119 · Accepted Answer

引导程序 5（2021 年更新）

从 Bootstrap 5 beta 开始， left 和 right 已被替换为start和end以支持 RTL。因此，Bootstrap 5 beta 的保证金实用程序发生了变化：

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

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

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

Bootstrap 5 alpha（原始答案）

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

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

score 65 · Accepted Answer

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

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

score 25 · Accepted Answer

您需要在 bootstrap 5中使用ms-auto而不是。ml-auto

水平方向敏感变量、实用程序和 mixin 被重命名为更合乎逻辑的名称 -代替Bootstrap 5start和在Bootstrap 5中。endleftright

将and重命名为.left-*and 。.right-*.start-*.end-*
将and重命名为.float-leftand 。.float-right.float-start.float-end
将and 重命名为.border-leftand 。.border-right.border-start.border-end
将and 重命名为.rounded-leftand 。.rounded-right.rounded-start.rounded-end
将and重命名为.ml-*and 。.mr-*.ms-*.me-*
将and重命名为.pl-*and 。.pr-*.ps-*.pe-*
将and重命名为.text-leftand 。.text-right.text-start.text-end

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

score 7 · Accepted Answer

这个问题已经在这里回答了

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

左 ==> 开始

正确 ==> 结束

所以

ml已更改为ms

先生变成了我

所以现在：

毫升自动 ==> 毫秒自动

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>

score 5 · Accepted Answer

justify-content-end 类有所不同。

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

score 4 · Accepted Answer

它与您应该使用的 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>

score 2 · Accepted Answer

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

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>

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

1

用 ms-auto 替换 mr-auto

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

于 2020-12-25T03:13:11.237 回答

twitter-bootstrap - Bootstrap 5导航栏右对齐项目

9 回答 9

编辑

Related

Reference