在 Bootstrap 4 面包屑中右对齐文本 [英] Right align text within Bootstrap 4 breadcrumbs

问题描述

我想在 bootstrap 4 的面包屑类中右对齐一个链接.我在 BS3 中使用 pull-right 类很容易地做到了这一点，但是 BS4 的浮动右侧"不能完成这项工作.

I want to right align a link within bootstrap 4's breadcrumb class. I did this pretty easily with pull-right class in BS3, however BS4's 'float-right' does not do the job.

例如:

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

在这种情况下，它根本无法正确浮动，我似乎无法找到解决方案.我该怎么做?

In this case it doesnt float-right at all and I cannot seem to work out a solution. How can I do this?

推荐答案

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

Bootstrap dropped pull-left and pull-right in v4 and replaced it with float-left and .float-right.

以下是新的 flex-box 的解决方法，希望对您有所帮助

Here below is a work around with the new flex-box I hope it helps

<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 文档的这一部分 Bootstrap4 个文档

You can refer to this section of the Bootstrap documentation Bootstrap 4 Docs

这篇关于在 Bootstrap 4 面包屑中右对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！