Bootstrap的水平定义列表
2018-09-08 19:03 更新
水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
2、将dd设置一个margin-left的值为180px,达到水平的效果
3、当标题宽度超过160px时,将会显示三个省略号
/*源码请查看bootstrap.css文件第608行~第621行*/
@media (min-width: 768px) { .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; } }
此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式:
1、将dt设置了一个左浮动,并且设置了一个宽度为160px2、将dd设置一个margin-left的值为180px,达到水平的效果
3、当标题宽度超过160px时,将会显示三个省略号
其用法如下:
<dl class="dl-horizontal">
<dt>W3cschool</dt>
<dd>一个致力于致力于推广 W3C 标准技术,坚持为为IT人员提供全面、优质、免费的在线学习教程、工具和资料库等服务的网站。
</dd>
<dt>w3cschool在线教程</dt>
<dd>一个专业的,真心实意在做培训的网站</dd>
<dt>我来测试一个标题,我来测试一个标题</dt>
<dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd>
</dl>
以上内容是否对您有帮助:
更多建议: