右内引导对齐文本4个面包屑

Question

我想右对齐引导4的面包屑类中的一个环节。我在BS3与右拉式类这样做很容易地，但BS4的“自由流通权”没有做的工作。

例如：

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

在这种情况下它不漂浮，就在所有和我似乎无法制定出一个解决方案。我怎样才能做到这一点？

Answer 1

引导下降pull-left和pull-right在v4和与float-left和.float-right.取而代之

这里下面是一个工作与周围的新的Flex-盒我希望它能帮助

<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 4 Docs本节

Answer 2

更新2018引导4.1

float-*不Flexbox的工作。

更好的方式来排列面包屑的项目到现在是引导4 Flexbox的是使用自动利润率。根本就没有做出最后一项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>，一个是在中间。”

在这种情况下，你只想用ml-auto在2点li的最左边（第一）。

https://www.codeply.com/go/6ITgrV7pvL