面包屑栏右侧的引导文本答案

【问题标题】：Bootstrap Text on Right of Breadcrumb Bar面包屑栏右侧的引导文本
【发布时间】：2019-04-04 20:28:50
【问题描述】：

我正在使用带有默认主题的 Bootstrap 3。我有面包屑使用：

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

如何使面包屑栏右侧的文本正确对齐？我在 Bootstrap 文档中找不到方法。

编辑：我不希望面包屑右对齐。我希望在栏的右侧显示一个单独的文本范围（因为它有点浪费空间）。

【问题讨论】：

您希望面包屑右对齐？
对不起，@Adrift 好电话。我编辑了我的问题。
“右对齐”和“右侧文本的单独跨度”之间究竟有什么区别？也许张贴您正在寻找的图片？

标签： css twitter-bootstrap-3

【解决方案1】：

使用 Bootstrap 4.3 更新 2019

class="pull-right" 的解决方案不适用于 Bootstrap 4。我已经能够使用 ml-auto 将文本放在右侧。

https://stackoverflow.com/a/51672730

  <ol class="breadcrumb">
    <li class="breadcrumb-item ml-3">
      <a href="#reserver">Réserver</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#about">À propos</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#horaires">Horaires</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#avis">Avis</a>
    </li>
    <li class="ml-auto">Détails établissement</li>
  </ol>
</nav>

【讨论】：

【解决方案2】：

没什么大不了的，使用 Bootstrap 的 pull-right 类：

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
  <li class="pull-right">Right Aligned Text</li>
</ol>

【讨论】：

这个解决方案效果很好。添加一些 CSS 以删除分隔符。 .breadcrumb > li + li.pull-right:before {content: none;}

【解决方案3】：

当我尝试添加一个带有右拉的

时，面包屑分隔符出现在我的右对齐项目之前（这不是我想要的）。

我想在面包屑栏的右端有一个搜索按钮，所以我这样做了：

<div class="breadcrumb">
  <div class="pull-right">
    <form>
      <button type="submit" class="btn btn-primary btn-sm">Search</button>
    </form>
  </div>
  <ol class="breadcrumb" style="height:100%;">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
  </ol>
</div>

通过在外部 div 上使用面包屑类，您可以获得整个事物的面包屑背景。您可能需要使用最外层 div 的填充，具体取决于右侧 div 中的高度。

【讨论】：

【解决方案4】：

Fwiw：使用 Bootstrap 4，我将接受的答案修改为如下所示：

<div class="breadcrumb">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/operations">Operations</a></li>
            <li class="breadcrumb-item active" aria-current="page">Choose document set</li>
        </ol>
    </nav>
    <div class="breadcrumb auto-ml">
        <a href="/user/edit_user_profile">Julie Operator</a>
        &nbsp; | &nbsp;
        <a href="/user/sign-out">Sign out</a>
    </div>
</div>

某人

dtk

PS：@Aikawa Towa's answer 似乎采用了相同的机制，不过看起来确实更整洁。

【讨论】：

【解决方案5】：

这个怎么样？

<div class="row">
    <ol class="breadcrumb col-md-8">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
    </ol>
    <div class="col-md-4">
        Something else on the right
    </div>
</div>

【讨论】：