更新2018年 Bootstrap 4.1

float-*不适用于flexbox。
由于Bootstrap 4是flexbox，所以将breadcrumbs项向右对齐的更好方法是使用自动边距。不要将最后一项设为breadcrumb-item来移除分隔符，也不要将其设为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>要右对齐，会怎么样？如果我使用两个<li class="ml-auto">Basket</li>，一个在中间。”
在这种情况下，您只需在2个li的最左边（第一个）使用ml-auto。
https://www.codeply.com/go/6ITgrV7pvL

Bootstrap 在v4中删除了pull-left和pull-right，并将其替换为float-left和.float-right.
这里下面是一个新的灵活框周围的工作，我希望它有所帮助

<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>

您可以参考Bootstrap文档Bootstrap 4 Docs中的此部分

在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>

只需在breadcrumb的第一项中调用ml-auto类：）

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item ml-auto"><a href="index.html">Home</a></li>
    <li class="breadcrumb-item" aria-current="page">Menu</li>
  </ol>
</nav>

对列表项使用ml-auto可更改效果。