bootstrap 列表--水平定义列表
生活随笔
收集整理的這篇文章主要介紹了
bootstrap 列表--水平定义列表
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
水平定義列表就像內(nèi)聯(lián)列表一樣，Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實(shí)現(xiàn)水平顯示效果。
@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的時(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è)省略號
?
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>水平定義列表</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head><body> <dl class="dl-horizontal"><dt>W3cplus</dt><dd>一個(gè)致力于推廣國內(nèi)前端行業(yè)的技術(shù)博客。它以探索為己任，不斷活躍在行業(yè)技術(shù)最前沿，努力提供高質(zhì)量前端技術(shù)博文</dd><dt>我來測試一個(gè)標(biāo)題，我來測試一個(gè)標(biāo)題</dt><dd>我在寫一個(gè)水平定義列表的效果，我在寫一個(gè)水平定義列表的效果</dd> </dl> <!--下面是代碼任務(wù)部分--> <dl class="dl-horizontal"><dt>標(biāo)題一：</dt><dd>描述內(nèi)容</dd><dt>標(biāo)題二：</dt><dd>描述內(nèi)容</dd> </dl></body> </html>轉(zhuǎn)載于:https://www.cnblogs.com/Harold-Hua/p/5371502.html
總結(jié)
以上是生活随笔為你收集整理的bootstrap 列表--水平定义列表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python GUI编程--Tkinte
- 下一篇： 后缀自动机序列自动机综合