Bootstrap-5 导航栏按钮从左到右

Question

我想将这个bootstrap5导航栏按钮从左侧更改为右侧，但我不知道如何使用css或bootstrap5来做到这一点，伙计们我该怎么做？

我的代码：

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#"> <h1>Pondadb</h1> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto"> <li class="nav-item active"> <a class="btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">About</a> </li> <li class="nav-item"> <a class="btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Contact</a> </li> <li class="nav-item"> <a class="btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Login</a> </li> <li class="nav-item"> <a class="btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Singn-Up</a> </li> </ul> </div> </div> </nav>

Answer 1

你有.mr-auto ，它是 Bootstrap 4 的margin-right: auto; . 这在 B5 中不起作用，正确的 class 应该是.me-auto 。

但是，您不想要margin-right: auto; ，你想要margin-left: auto; 将元素推到右边。 在 B5 中，您应该使用ms-auto 。

间距 · Bootstrap v5.3

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#"> <h1>Pondadb</h1> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ms-auto"> <li class="nav-item active"> <a class="btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">About</a> </li> <li class="nav-item"> <a class="btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Contact</a> </li> <li class="nav-item"> <a class="btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Login</a> </li> <li class="nav-item"> <a class="btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Singn-Up</a> </li> </ul> </div> </div> </nav>

Answer 2

我认为将“mr-auto”更改为“ml-auto”应该有所帮助。 它是 margin-right: auto 的 bootstrap 形式，所以它意味着它位于右边。 如果我没看错，你希望它在右边，所以把它改成 margin-left: auto = ml-auto。