Bootstrap4面包屑导航breadcrumb右侧添加元素
taotaoit Bootstrap4 2020-06-05 2502 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

6282156 2594 39
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(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中popper.min.js的作用
Bootstrap4 | 2020-05-27 12051
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 7080
Bootstrap4 导航栏元素居右 Bootstrap 4正解: .ml-auto元素居右 .mr-auto元素居左
评论:0条
评论加载中...
发表评论