Bootstrap 5 导航栏右对齐项目

Question

如何将 Bootstrap 5 导航栏项目向右对齐？在 Bootstrap 3 中它是

navbar-right

。在 Bootstrap 4 中它是

ml-auto

。但不适用于 Bootstrap 5。

Answer 1

Bootstrap 5（2021 年更新）

从 Bootstrap 5 beta 开始，左和右已被 start 和 end 取代，以实现 RTL 支持。因此，Bootstrap 5 beta 的保证金效用发生了变化：

```
ml-auto
```
=>
```
ms-auto
```
（开始）
```
mr-auto
```
=>
```
me-auto
```
（完）

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

ml-* => ms-*
pl-* => ps-*
先生-* => 我-*
pr-* => pe-*
文字左=>文字开始
文本右=>文本结束
左浮动 => 左浮动
浮动右=>浮动结束
左边框=> 边框开始
右边界=> 边界末端
左圆角 => 圆角开始
右圆角 => 圆角末端
dropleft => dropstart
dropright=> dropend
下拉菜单左 => 下拉菜单开始
下拉菜单右 => 下拉菜单结束
carousel-item-left => carousel-item-start
旋转木马项目右=>旋转木马项目结束

Bootstrap 5 alpha（原始答案）

这个问题是针对 Bootstrap 5 alpha 提出的，因此

ml-auto

应该仍然有效。

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

Answer 2

我将

mr-auto

更改为

ms-auto

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

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

Answer 3

您需要在 bootstrap 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

Answer 4

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

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

Answer 5

这个问题已经有答案了这里

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

左==>开始

右==>结束

因此

ml已更改为ms

先生已更改为我

所以现在：

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

。这是来自的一个片段。 Navbar 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/[email protected]/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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Answer 7

这个对我来说效果很好，

看看这个：

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

Answer 8

将 mr-auto 替换为 ms-auto

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

Answer 9

我给了我的

<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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>

</html>

Answer 10

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

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

Answer 11

这对我有用：

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

Answer 12

我使用 d-flex 进行右侧对齐

   <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial- 
         scale=1">
        <title>Bootstrap demo</title>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
   </head>
   <body>


  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled">Disabled</a>
                </li>
            </ul>

            <div class="d-flex">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Right link 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Right link 2</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</nav>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
     </body>
  </html>

Answer 13

“依赖关系”：{ "bootstrap": "^5.1.3", “下一个”：“12.1.4”， “节点-sass”：“^7.0.1”， “反应”：“18.0.0”， "react-bootstrap": "^2.2.3", “反应-dom”：“18.0.0” },

第一个选项

<Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
        <Nav>
          <Link href="/" passHref>
            <Nav.Link>Home</Nav.Link>
          </Link>
        </Nav>
      </Navbar.Collapse>

className="justify-content-end"

或第二种选择

<Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ms-auto">
          <Link href="/" passHref>
            <Nav.Link>Home</Nav.Link>
          </Link>
        </Nav>
      </Navbar.Collapse>

className="ms-auto"

Bootstrap 5 导航栏右对齐项目

问题描述投票：0回答：13

13个回答

编辑

最新问题

Bootstrap 5 导航栏右对齐项目

问题描述 投票：0回答：13

13个回答

编辑

最新问题

问题描述投票：0回答：13