代码之家 › 专栏 › 技术社区 › panc

如何将多个文本与引导4面包屑右对齐?

bootstrap-4 django html

-1

panc · 技术社区 · 7 年前

我想使用bootstrap 4.1创建一个breadcrumb,以便站点地图路径显示在左侧,注册并在右侧显示登录链接。以下是我想要实现的一个示意图:

Home/Blog/post                                                Register/Login

通过以下 this ,我可以使用 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

1 回复 | 直到 7 年前

1

AlexW 7 年前

从登录中删除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>