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文档中找到方法。

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

Answer 1

没什么大不了的，只需使用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>

Answer 2

当我尝试添加一个＆lt; li＆gt;使用右拉，面包屑分隔符出现在我的右对齐项目之前（这不是我想要的）。

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

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

Answer 3

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

Answer 4

这个怎么样？

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

首先：使用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似乎应用了相同的机制，但看起来确实更整洁。

面包屑栏右侧的Bootstrap文本

5 个答案: