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

Question

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

CaR*_*aRL 14 css alignment navbar bootstrap-5

我从https://www.codeply.com/go/qhaBrcWp3v复制了导航栏 HTML 代码

示例 6：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1">
    <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
    <a class="navbar-brand d-none d-lg-inline-block" href="#">
        Navbar 6
    </a>
    <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
        <img src="//placehold.it/40?text=LOGO" alt="logo">
    </a>
    <div class="w-100 text-right">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
    <ul class="navbar-nav ml-auto flex-nowrap">
        <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item">How We Help</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item">Bdfdsfslog</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item">Contact</a>
        </li>
    </ul>
</div>

Run Code Online (Sandbox Code Playgroud)

该代码将导航项目保持在右侧，但是当我粘贴它并运行我的 HTML 代码时，它不起作用，所有项目都在左侧

这是我的 index.html

<html>
<head>
    <title>Website Template</title>
    <link rel="stylesheet" href="style.css"> 
    <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">
        <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>
</head>
<body data-spy="scroll" data-target="#navbarResponsive">
    <div id="home"></div>
    <!-- NAVIGATION -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="d-flex flex-grow-1">
            <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
            <a class="navbar-brand d-none d-lg-inline-block" href="#">
                Navbar 6
            </a>
            <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
                <img src="//placehold.it/40?text=LOGO" alt="logo">
            </a>
            <div class="w-100 text-right">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </div>
        <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
            <ul class="navbar-nav ml-auto flex-nowrap">
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">How We Help</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- END OF NAVIGATION -->
</body>

Run Code Online (Sandbox Code Playgroud)

我已经尝试过https://getbootstrap.com/docs/5.0/components/navbar/ 中的Navbar代码，但我不知道如何移动导航项目（不起作用）ml-auto

Answer 1

Zim*_*Zim 32

我的示例 Codeply 中的代码使用 Bootstrap 4，但您的代码使用Bootstrap 5 beta。如果您查看新的Bootstrap 5 间距实用程序类，您会看到...

l（左）已替换为s（开始）
r（右）已替换为e（结束）

为什么左边距 (ml-*) 在 Bootstrap 5 中不起作用？

ml-auto不再存在，Bootstrap 5 等效项将是ms-auto：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex flex-grow-1">
        <span class="w-100 d-lg-none d-block">
            <!-- hidden spacer to center brand on mobile --></span>
        <a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a>
        <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
            <img src="//placehold.it/40?text=LOGO" alt="logo">
        </a>
        <div class="w-100 text-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
    <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
        <ul class="navbar-nav ms-auto flex-nowrap">
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">How We Help</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Blog</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Run Code Online (Sandbox Code Playgroud)

演示：https : //codeply.com/p/zzFC5XoyUm

为什么右边距 (mr-*) 在 Bootstrap 5 中不起作用？

此外，mr-auto已替换为me-auto.

在这里您可以了解为什么 Bootstrap 5 使用startandend方法来改进 RTL 支持，因为leftandright是绝对的，而 whilestart和end是相对的。

justify-content-end也可以按照此处的说明使用flexbox 实用程序

归档时间：	4 年，10 月前
查看次数：	14618 次
最近记录：	4 年，1 月前