Bootstrap页面布局9 - BS列表

列表:

  无序列表(列表中项目内容没有固定的顺序),

  有序列表(通常使用在一组有前后顺序的内容上),

  描述列表(定义解释一组词汇)

无序列表:

  <ul>

    <li>Ueditor编辑器</li>

    <li>TinyMCE编辑器</li>

    <li>Kindeditor编辑器</li>

  </ul>

如图:

  Bootstrap页面布局9 - BS列表

有序列表: 

  <ol>

    <li>Ueditor编辑器</li>

    <li>TinyMCE编辑器</li>

    <li>Kindeditor编辑器</li>

  </ol>

如图:

    Bootstrap页面布局9 - BS列表

描述列表:

  dt:要描述的词汇

  dd:对这个词汇进行解释的句子

  <dl>

    <dt>Ueditor编辑器</dt>

    <dd>Ueditor编辑器强大细致</dd>

    <dt>TinyMCE编辑器</dt>

    <dd>TinyMCE编辑器好像还不错</dd>

    <dt>Kindeditor编辑器</dt>

    <dd>Kindeditor编辑器非常好用</dd>

  </dl>

如图:

  Bootstrap页面布局9 - BS列表

BS为描述列表提供了类来更改描述列表的样式:

  Bootstrap页面布局9 - BS列表

这里的样式应该是水平对齐,为什么这里没有水平对齐,找到bootstrap.css!!!

源文件中的

.dl-horizontal dt {
  float: left;
  clear: left;
  width: 120px;
  text-align: right;
}
.dl-horizontal dd {
  margin-left: 130px;//这里的130px表示dd距离dt相差10个像素
}

不用修改源码,只需要在新的css文件或者页面style标签中重新定义.dl-horizontal dd的样式为:

.dl-horizontal dd {
  margin-left: 10px;

  float:left;

}

修改完成后,得到如图所示效果:

  Bootstrap页面布局9 - BS列表

这个效果就正常了!(但我还是不确定,是不是这么修改...)

本人这里如果有问题,请留言,谢谢先。

上一篇:MySQL 用 limit 为什么会影响性能?


下一篇:你真的理解Binder“一次拷贝“吗,成为阿里P7移动架构师到底有多难