水平定義列表就像內(nèi)聯(lián)列表一樣，Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實(shí)現(xiàn)水平顯示效果。
/*源碼請(qǐng)查看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;
  }
}

此處添加了一個(gè)媒體查詢。也就是說，只有屏幕大于768px的時(shí)候，添加類名“.dl-horizontal”才具有水平定義列表效果。其實(shí)現(xiàn)主要方式：
1、將dt設(shè)置了一個(gè)左浮動(dòng)，并且設(shè)置了一個(gè)寬度為160px
2、將dd設(shè)置一個(gè)margin-left的值為180px，達(dá)到水平的效果
3、當(dāng)標(biāo)題寬度超過160px時(shí)，將會(huì)顯示三個(gè)省略號(hào)

其用法如下：

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一個(gè)致力于推廣國(guó)內(nèi)前端行業(yè)的技術(shù)博客。它以探索為己任，不斷活躍在行業(yè)技術(shù)最前沿，努力提供高質(zhì)量前端技術(shù)博文</dd>
    <dt>慕課網(wǎng)</dt>
    <dd>一個(gè)專業(yè)的，真心實(shí)意在做培訓(xùn)的網(wǎng)站</dd>
    <dt>我來測(cè)試一個(gè)標(biāo)題，我來測(cè)試一個(gè)標(biāo)題</dt>
    <dd>我在寫一個(gè)水平定義列表的效果，我在寫一個(gè)水平定義列表的效果</dd>
</dl>

寬屏下的效果（屏幕大于768px）：

當(dāng)你縮小你的瀏覽器屏幕時(shí)，水平定義列表將回復(fù)到原始的狀態(tài)。

注：結(jié)果可以在最右側(cè)結(jié)果窗口中看到（鼠標(biāo)滑過結(jié)果窗口時(shí)會(huì)出現(xiàn)“全屏”按鈕）