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

Posted 2023-02-22

【中文标题】无法将面包屑项目移动到右侧浮动

【英文标题】：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？

是的。它不起作用

你希望它看起来如何？

【参考方案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】：

完美！真的很管用。哇 ！