Bootstrap 面包屑栏右侧的文本

Question

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

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

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

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

Answer 1

这个怎么样？

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

Answer 2

没什么大不了的，就用Bootstrap的pull-right class:

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

Answer 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 上使用面包屑 class，您可以获得整个事物的面包屑背景。您可能需要使用最外面的填充 div，具体取决于您右边的高度 div。

Answer 4

更新 2019 使用 Bootstrap 4.3

class="pull-right" 的解决方案不适用于 Bootstrap 4。我已经能够使用 ml-auto.

将文本放在右边

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

Answer 5

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: 似乎应用了相同的机制，不过看起来确实更整洁。

Bootstrap 面包屑栏右侧的文本

Bootstrap Text on Right of Breadcrumb Bar

css

twitter-bootstrap-3