Bootstrap的水平定義列表

2018-09-08 19:03 更新
水平定義列表就像內(nèi)聯(lián)列表一樣,Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實現(xiàn)水平顯示效果。

/*源碼請查看bootstrap.css文件第608行~第621行*/


Bootstrap的水平定義列表


@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”才具有水平定義列表效果。其實現(xiàn)主要方式:

1、將dt設(shè)置了一個左浮動,并且設(shè)置了一個寬度為160px
2、將dd設(shè)置一個margin-left的值為180px,達(dá)到水平的效果
3、當(dāng)標(biāo)題寬度超過160px時,將會顯示三個省略號

其用法如下:

<dl class="dl-horizontal">
    <dt>W3cschool</dt>
    <dd>一個致力于致力于推廣 W3C 標(biāo)準(zhǔn)技術(shù),堅持為為IT人員提供全面、優(yōu)質(zhì)、免費的在線學(xué)習(xí)教程、工具和資料庫等服務(wù)的網(wǎng)站。
</dd>
    <dt>w3cschool在線教程</dt>
    <dd>一個專業(yè)的,真心實意在做培訓(xùn)的網(wǎng)站</dd>
    <dt>我來測試一個標(biāo)題,我來測試一個標(biāo)題</dt>
    <dd>我在寫一個水平定義列表的效果,我在寫一個水平定義列表的效果</dd>
</dl>



以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號