Невозможно переместить элементы крошки, чтобы плавать вправо

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

Отлично!это действительно работает. Вау!

Answer 2

используйте этот 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>