css - 面包屑栏右侧的Bootstrap文本

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

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

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

编辑:我不希望面包屑右对齐。我希望在栏的右侧显示一个单独的文本跨度(因为这是一种浪费的空间)。

最佳答案

当我尝试仅添加带pull-right的

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

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

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

关于css - 面包屑栏右侧的Bootstrap文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28634905/