bootstrap-4

  html文档中,列表结构主要有三种:有序列表、无序列表和定义列表:<ul><li>、<ol><li>、<dl><dt><dd>

  bootstrap根据平时的使用情况提供了六种形式的列表:普通列表、有序列表、去点列表、内联列表、描述列表、水平描述列表

  列表----去点列表:列表(<ul>或者<ol>)中添加类名".list-unstyled",这样就可以去除默认的列表样式的风格

  列表----内联列表:通过添加类名".list-inline"来实现内联列表,简单点就是把垂直列表换成水平列表,而且去掉项目符号,保持水平显示。

  列表----定义列表:bootstrap只是调整了行间距,外边距和字体加粗效果。

  列表----水平定义列表:bootstrap可以给<dl>添加类名“.dl-horizaontal”给定义列表实现水平显示效果,详见608-621行

      此处添加了一个媒体查询,也就是说,只有屏幕大于678px的时候,添加类名".dl-horicaontal"才具有水平定义列表效果,其实现主要方式:

      1.将dt设置了一个左浮动,并且设置了一个宽度为160px

      2.将dd设置一个margin-left的值为180px,达到水平的效果

      3.当标题宽度超过160px时,将会显示三个省略号

原文地址:https://www.cnblogs.com/jodie-blog/p/5025989.html