阅读(4192) (1)

Bootstrap的水平定义列表

2016-09-08 19:03:38 更新
水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

/*源码请查看bootstrap.css文件第608行~第621行*/


Bootstrap的水平定义列表


@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设置了一个左浮动,并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px,达到水平的效果
3、当标题宽度超过160px时,将会显示三个省略号

其用法如下:

<dl class="dl-horizontal">
    <dt>W3cschool</dt>
    <dd>一个致力于致力于推广 W3C 标准技术,坚持为为IT人员提供全面、优质、免费的在线学习教程、工具和资料库等服务的网站
</dd>
    <dt>zijiebao在线教程</dt>
    <dd>一个专业的,真心实意在做培训的网站</dd>
    <dt>我来测试一个标题,我来测试一个标题</dt>
    <dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd>
</dl>