水平定義列表就像內聯列表一樣，Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實現水平顯示效果。
/*源碼請查看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;
  }
}

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

其用法如下：

<dl class="dl-horizontal">
    <dt>W3cplus</dt>
    <dd>一個致力于推廣國內前端行業的技術博客。它以探索為己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文</dd>
    <dt>慕課網</dt>
    <dd>一個專業的，真心實意在做培訓的網站</dd>
    <dt>我來測試一個標題，我來測試一個標題</dt>
    <dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd>
</dl>

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

當你縮小你的瀏覽器屏幕時，水平定義列表將回復到原始的狀態。

注：結果可以在最右側結果窗口中看到（鼠標滑過結果窗口時會出現“全屏”按鈕）