Bootstrap4面包屑导航breadcrumb右侧添加元素

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

Bootstrap4 面包屑导航 breadcrumb ml-auto

打开边栏(ESC) 关闭边栏(ESC)

默认的面包屑导航代码

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

样式：

from clipboard

需要的样式：

from clipboard

怎么实现呢？

from clipboard

这样不行，因为.breadcrumb宽度是100%，‘显示模式’会换行

from clipboard

这样也不行，‘显示模式’没有右对齐。

查看.breadcrumb的css，发现它是弹性布局

.breadcrumb {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

所以用.ml-auto来实现‘显示模式’右对齐

代码如下：

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首页</a></li>
        <li class="breadcrumb-item"><a href="#">技术</a></li>
        <li class="ml-auto">
            显示模式：
            <span data-type="dcolumn" class="fa fa-bars "></span>
            <span data-type="cascade" class="fa fa-th-large active"></span>
        </li>
    </ol> 
</nav>

赏

前一篇

bootstrap4中container和container...

后一篇

Bootstrap4中利用弹性布局实现一侧宽度固定，一侧宽度...

相关推荐

Bootstrap4中popper.min.js的作用

Bootstrap4 | 2020-05-27 14786

popper.min.js 用于设置弹窗、提示、下拉菜单，是第三方插件，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 <script src="bootstrap-4.4.1/js/popper.min.js" ></script> <script s...

Bootstrap4 .ml-auto元素居右.mr-auto元素居左

Bootstrap4 | 2019-11-25 9072

Bootstrap4 导航栏元素居右 Bootstrap 4正解： .ml-auto元素居右 .mr-auto元素居左