Html 引导4个面包屑中的右对齐文本

我想右对齐Bootstrap4的breadcrumb类中的链接。我在BS3中使用pull right类很容易做到这一点，但是BS4的“float right”并不能完成这项工作

例如：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
    <a href="Basket" class="float-right">Basket</a>
  </ol>
</nav>

数据

---

在这种情况下，它根本不能正确浮动，我似乎无法找到解决方案。如何执行此操作？

引导程序在v4中已删除

向左拉

和

向右拉

，并将其替换为

向左浮动

和

向右浮动。

下面是一个新flex box的解决方案，我希望它能有所帮助

<nav aria-label="breadcrumb" class="breadcrumb d-flex justify-content-between">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>

    </ol>   
<a href="#">Basket</a>  
</nav>

数据

---

您可以参考引导文档的本节

更新2018引导4.1

float-*

不适用于flexbox

现在引导程序4是flexbox，将面包屑项与之对齐的更好方法是使用自动边距。简单地说，不要将最后一个项目设为一个

breadcrumb项目

以移除分隔器，而

ml auto

将其推到右侧

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active">Data</li>
        <li class="ml-auto">Basket</li>
    </ol>
</nav>

数据
篮子

编辑：

“如果我有两个要右对齐的

，怎么样？如果我使用 两个< > > Li类＝“ml自动”>筐 < /代码>，一个在中间。 在这种情况下，您只需在2个

li

中最左边（第一个）使用

ml auto

---

在Bootstrap v4中就这样使用+

<nav aria-label="breadcrumb">
    <ol class="breadcrumb justify-content-center">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>

数据

不幸的是，这没有将链接保持在面包屑中（视觉上），而是将其正确浮动。编辑：我使用bootswatch主题lumen，使用默认的bootstrap 4主题，您的解决方案可以工作。但是由于重复的breadcrumb类，它有很多额外的填充。thanks@Adam91我还遇到了很多额外的填充。你解决了吗？在官方文档中，他们还使用了重复的breadcrumb类，我不明白。。。没有理由两次使用breadcrumb类，而且它的结构也不正确。也没有理由使用d-flex，因为

.breadcrumb

是

display:flex

提供了一个更好的解决方案，我想我有两个

要右对齐，怎么样？如果我使用两个< > > Li类＝“ml自动”>筐

<代码>，一个在中间。不，只在2的左边（第一个）使用它。