Question

我想在bootstrap 4的breadcrumb类中对齐一个链接。我在BS3中使用右拉类很容易做到这一点，但是BS4＆＃39;浮动右＆＃39;不做这个工作。

例如：

<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

更新2018 Bootstrap 4.1

float-*不适用于flexbox。

既然Bootstrap 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中最左边（第一个）上使用li。

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

Answer 2

Bootstrap在v4中删除了pull-left和pull-right，并将其替换为float-left和.float-right.

下面是一个解决新的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>

您可以参考Bootstrap文档Bootstrap 4 Docs

的这一部分

Answer 3

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

右对齐Bootstrap 4面包屑

3 个答案: