bootstrap 列表--水平定义列表
生活随笔
收集整理的這篇文章主要介紹了
bootstrap 列表--水平定义列表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
水平定義列表就像內聯列表一樣，Bootstrap可以給<dl>添加類名“.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;} }只有屏幕大于768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果。其實現主要方式：
1、將dt設置了一個左浮動，并且設置了一個寬度為160px
2、將dd設置一個margin-left的值為180px，達到水平的效果
3、當標題寬度超過160px時，將會顯示三個省略號
?
<!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>一個致力于推廣國內前端行業的技術博客。它以探索為己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文</dd><dt>我來測試一個標題，我來測試一個標題</dt><dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd> </dl> <!--下面是代碼任務部分--> <dl class="dl-horizontal"><dt>標題一：</dt><dd>描述內容</dd><dt>標題二：</dt><dd>描述內容</dd> </dl></body> </html>轉載于:https://www.cnblogs.com/Harold-Hua/p/5371502.html
總結
以上是生活随笔為你收集整理的bootstrap 列表--水平定义列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python GUI编程--Tkinte
- 下一篇： 后缀自动机序列自动机综合