Horizontal definition lists like inline lists, bootstrap can add the class name ". Dl-horizontal" to the definition list for horizontal display.
@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 ; } Adding the class name ". Dl-horizontal" only has a horizontal definition list effect when the screen is larger than 768px . The main way to achieve this:
1, the DT set a left float, and set a width of 160px
2, the DD set a margin-left value of 180px, to achieve the level of effect
3. When the title width exceeds 160px, three ellipses will be displayed
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Level definition List</title><Linkrel= "stylesheet"href= "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></Head><Body><DLclass= "Dl-horizontal"> <DT>W3cplus</DT> <DD>A technical blog dedicated to promoting the domestic front-end industry. It takes exploration as its responsibility and is constantly active in the forefront of industry technology, and strives to provide high quality front-end technology blog</DD> <DT>I'm going to test a title and I'll test a title</DT> <DD>I'm writing the effect of a level definition list, and I'm writing a level definition list effect</DD></DL><!--Here is the Code task section -<DLclass= "Dl-horizontal"> <DT>Title One:</DT> <DD>Description Content</DD> <DT>Title II:</DT> <DD>Description Content</DD></DL></Body></HTML>
Bootstrap List--level definition list
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
