DIV CSS 佈局教程網

本文實例為大家分享了Bootstrap CSS布局中的列表布局，供大家參考，具體內容如下

列表
普通列表ul li
有序列表ol li
去點列表.list-unstyled
內聯列表.list-inline
定義列表dl dt dd
水平定義列表dl-horizontal

ul,
ol {
 margin-top: 0;
 margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
 margin-bottom: 0;
}

普通列表ul li
有序列表ol li
去點列表class=”list-unstyled”

//源碼
.list-unstyled {
 padding-left: 0;
 list-style: none;
}

內聯列表class=”list-inline”

//源碼
.list-inline {
 padding-left: 0;
 margin-left: -5px;
 list-style: none;
}
.list-inline > li {
 display: inline-block;
 padding-right: 5px;
 padding-left: 5px;
}

定義列表dl dt dd

dl {
 margin-top: 0;
 margin-bottom: 20px;
}
dt,
dd {
 line-height: 1.42857143;
}
dt {
 font-weight: bold;
}
dd {
 margin-left: 0;
}

水平定義列表class=”dl-horizontal”

@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;
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。