面包屑栏右侧的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文档中找不到方法.

编辑:我不希望面包屑右对齐.我希望在栏的右侧显示单独的文本范围(因为它是一种浪费的空间).

Answer 1

使用 Bootstrap 4.3 更新 2019

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

/sf/answers/3617091131/

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

Answer 3

当我尝试添加一个带有 pull-right 的 <li> 时，面包屑分隔符出现在我正确对齐的项目之前（这不是我想要的）。

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

<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 中的高度。