无法将面包屑项目移动到右侧浮动答案

【问题标题】：Unable to move breadcrumb items to float to the right无法将面包屑项目移动到右侧浮动
【发布时间】：2019-07-04 06:10:30
【问题描述】：

我正在使用 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">

尽管使用了向右拉，但面包屑图标不会向右浮动。

面包屑看起来像这样

我在这里做错了什么？

【问题讨论】：

您是否尝试将此规则添加到您的样式float:right？
是的。它不起作用
你希望它看起来如何？

标签： html css twitter-bootstrap vue.js bootstrap-4

【解决方案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>

【讨论】：

或者可以使用引导类mr-auto。 <li class="breadcrumb-item active mr-auto">Files</li>.

【解决方案2】：

完美！真的很管用。哇！

【讨论】：