Question

我想使用Bootstrap 4.1创建面包屑，以便站点地图路径显示在左侧，并注册并在右侧显示登录链接。以下是我想要实现的示意图：

Home/Blog/post                                                Register/Login

在this之后，我可以使用ml-auto将“登录”链接移到右侧。如果我在“注册”上使用ml-auto，它将显示在中间。

我的代码：

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Blog</a></li>
        <li class="breadcrumb-item active">post</li>
        <li class="ml-auto">Register</li>
        <li class="ml-auto">Login</li>
    </ol>
</nav>

最终结果：

Home/Blog/post                    Register                        Login

Answer 1

从登录名删除ml-auto，只需一个ml-auto即可将其应用于所有内容

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Blog</a></li>
        <li class="breadcrumb-item active">post</li>
        <li class="ml-auto">Register</li>
        <li>Login</li>
    </ol>
</nav>

如何使用Bootstrap 4面包屑正确对齐多个文本？

1 个答案: