右侧的Bootstrap 5 NavBar项

如何解决右侧的Bootstrap 5 NavBar项

如何将Bootstrap 5导航栏项目右对齐？在Bootstrap 3中，它是导航栏右边的。在Bootstrap 4中，它是ml-auto。但是对于Bootstrap 5无效。

解决方法

引导程序 5（2021 年更新）

自 Bootstrap 5 测试版起，RTL support 的左右已被 start 和 end 取代。因此，Bootstrap 5 测试版的保证金实用程序发生了变化：

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

另请注意，所有左右的用法在 Bootstrap 5 中都被替换为 start 和 end...

ml-* => ms-*
pl-* => ps-*
mr-* => me-*
pr-* => pe-*
text-left => text-start
text-right=> 文本结束
浮动左 => 浮动开始
float-right=> float-end
border-left => border-start
border-right=> border-end
rounded-left => rounded-start
rounded-right=>rounded-end
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 应该仍然有效。

Align nav items to right in Bootstrap 5

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

在Bootstrap 5中，水平方向敏感的变量、实用程序和mixin被重命名为更多的逻辑名称——start和end代替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。

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

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

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

我给了我的 <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>

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

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

我认为，在Bootstrap 5中，它仍然是ml-auto

阅读此文档https://mdbootstrap.com/docs/standard/navigation/navbar/

与Bootstrap 4相同，应使用ml-auto。这是摘录。 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>

用ms-auto替换mr-auto

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

这个问题已经有人回答了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>

右侧的Bootstrap 5 NavBar项

如何解决右侧的Bootstrap 5 NavBar项

解决方法

相关推荐