无法移动面包屑项目以向右浮动

Question

我正在使用 Vue.js 和 Bootstrap 开发应用程序。我正在开发一个面包屑，我希望图标显示在右侧，文本“文件”浮动到左侧。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="conatainer-fluid">
      <ol class="breadcrumb" style="padding: 0rem 1rem 0rem; background-color: transparent">
        <li class="breadcrumb-item active">Files</li>
        <li class="pull-right"><i class="fa fa-sort-amount-asc"></i></li>
        <li class="pull-right"><i class="fa fa-th-large"></i></li>
        <li class="pull-right"><i class="fa fa-list-ul"></i></li>
      </ol>
    </div>
    <hr id="breadcrumb_hr">

尽管使用了向右拉，但面包屑图标并没有向右浮动。

面包屑看起来像这样

我在这里做错了什么？

Answer 1

使用这个 css，它的工作

.breadcrumb{
    display: flex;
    width: 100%;

}
.breadcrumb-item.active{
   margin-right:auto;
}

或使用 html

  <div class="conatainer-fluid">
      <ol class="breadcrumb" style="display:flex; width:100%; padding: 0rem 1rem 0rem; background-color: transparent">
        <li class="breadcrumb-item active" style="margin-right:auto">Files</li>
        <li class="pull-right"><i class="fa fa-sort-amount-asc"></i></li>
        <li class="pull-right"><i class="fa fa-th-large"></i></li>
        <li class="pull-right"><i class="fa fa-list-ul"></i></li>
      </ol>
    </div>