在Bootstrap 4面包屑中右对齐文本

Question

在Bootstrap 4面包屑中右对齐文本

4

我想在Bootstrap 4的导航条类中右对齐一个链接。在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>

在这种情况下，它根本不会右浮动，我似乎找不到解决方法。我该怎么做？

- Adam91

一篇较晚的回答（https://dev59.com/mKvka4cB1Zd3GeqPmgWX）提供了更好的解决方案，我认为。 - löker

5个回答

1

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。

- Hassan Sani

不幸的是，这并不能在面包屑中保持链接（视觉上），但可以将其向右浮动。 - Adam91

编辑：我正在使用 Bootswatch 主题 Lumen，与默认的 Bootstrap 4 主题配合使用，您提供的解决方案可以使用。但是由于重复的 breadcrumb 类别，它会有很多额外的填充。谢谢。 - Adam91

@Adam91 我也遇到了很多额外的填充。你解决了吗？在官方文档中，他们还使用了重复的面包屑类，这一点我不理解... https://getbootstrap.com/docs/4.0/components/breadcrumb/ - xji

没有必要两次使用面包屑类，而且这不是正确的结构。同时，没有必要使用d-flex，因为.breadcrumb已经是display:flex。 - Carol Skelly

0

只需在面包屑的第一项中调用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>

- Zafar Faheem

0

使用 ml-auto 在列表项上以更改效果。

- DeepShr

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

0

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

- Sanu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

2018年更新Bootstrap 4.1

float-*与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>，其中一个会居中。"

在这种情况下，您只需要在这2个li中的最左侧（第一个）使用ml-auto。

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