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

淘淘IT

记录工作学习中的点点滴滴

本站创建于2017年,用于记录工作和学习中遇到的问题。同时,不断提升网站的使用体验,增加新的功能。

918120 1287 12
最新评论
感谢大佬解决了我的问题
评 留言
11111111111111111111ewqr :ku:
评 留言
@xiaoniba 好像是编码GBK和utf-8的区别,请看下我摘抄的一篇文章,里面有介绍http://taotaoit.com/article/details/885.html,你可以尝试下是否可以
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
\x7f-\xff 这个匹配什么东东,会不会出现安全问题??? 改成这样如何 if ($strict && !preg_match('/^[\w\.\*\x{4e00}-\x{9fa5}]+$/u', $key)) {
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
完美解决 牛逼
评 tp5.1中字段别名是汉字,提示错误:不支持的数据表达式
文章标签更多
ThinkPHP (124)
Mysql (28)
DedeCms (30)
jQuery (28)
证件照 (1)
setInc (3)
setDec (3)
onclick (3)
打开边栏(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 .ml-auto元素居右.mr-auto元素居左
Bootstrap4 | 2019-11-25 2386
Bootstrap4 导航栏元素居右 Bootstrap 4正解: .ml-auto元素居右 .mr-auto元素居左
Bootstrap4中popper.min.js的作用
Bootstrap4 | 2020-05-27 1804
popper.min.js 用于设置弹窗、提示、下拉菜单,是第三方插件,目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 <script src="bootstrap-4.4.1/js/popper.min.js" ></script> <script s...
评论:0条
评论加载中...
发表评论