本文实例为大家分享了Bootstrap CSS布局中的列表布局，供大家参考，具体内容如下

列表
普通列表ul li
有序列表ol li
去点列表.list-unstyled
内联列表.list-inline
定义列表dl dt dd
水平定义列表dl-horizontal

ul,
ol {
 margin-top: 0;
 margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
 margin-bottom: 0;
}

普通列表ul li
有序列表ol li
去点列表class=”list-unstyled”

//源码
.list-unstyled {
 padding-left: 0;
 list-style: none;
}

内联列表class=”list-inline”

//源码
.list-inline {
 padding-left: 0;
 margin-left: -5px;
 list-style: none;
}
.list-inline > li {
 display: inline-block;
 padding-right: 5px;
 padding-left: 5px;
}

定义列表dl dt dd

dl {
 margin-top: 0;
 margin-bottom: 20px;
}
dt,
dd {
 line-height: 1.42857143;
}
dt {
 font-weight: bold;
}
dd {
 margin-left: 0;
}

水平定义列表class=”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;
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Bootstrap  # CSS  # 布局  # 列表  # Bootstrap源码解读媒体对象、列表组和面板（10）  # Bootstrap基本组件学习笔记之列表组(11)  # 基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果  # BootStrap实现邮件列表的分页和模态框添加邮件的功能  # bootstrap下拉列表与输入框组结合的样式调整  # jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法  # Knockout结合Bootstrap创建动态UI实现产品列表管理  # 利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表  # 深入浅析Bootstrap列表组组件  # Bootstrap列表组学习使用  # 大家分享  # 具体内容  # 大家多多  # pre  # class  # brush  # dt  # dd  # horizontal  # xhtml  # px 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么进行浏览器测试_Laravel Dusk自动化浏览器测试入门  Linux系统命令中screen命令详解  香港服务器网站推广：SEO优化与外贸独立站搭建策略  使用豆包 AI 辅助进行简单网页 HTML 结构设计  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  如何在Windows 2008云服务器安全搭建网站？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  Angular 表单中正确绑定输入值以确保提交与验证正常工作  Laravel Docker环境搭建教程_Laravel Sail使用指南  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用  Laravel如何处理文件下载请求？（Response示例）  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  如何在万网自助建站中设置域名及备案？  浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】  网站制作企业,网站的banner和导航栏是指什么？  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  WEB开发之注册页面验证码倒计时代码的实现  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  LinuxShell函数封装方法_脚本复用设计思路【教程】  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  如何为不同团队 ID 动态生成多个独立按钮  Laravel如何使用Service Container和依赖注入？（代码示例）  敲碗10年！Mac系列传将迎来「触控与联网」双革新  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  中山网站制作网页,中山新生登记系统登记流程？  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  Laravel如何自定义错误页面（404, 500）？（代码示例）  如何在阿里云ECS服务器部署织梦CMS网站？  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  如何在香港服务器上快速搭建免备案网站？  SQL查询语句优化的实用方法总结  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  Linux网络带宽限制_tc配置实践解析【教程】  文字头像制作网站推荐软件,醒图能自动配文字吗？  北京企业网站设计制作公司,北京铁路集团官方网站？  Laravel怎么实现模型属性转换Casting_Laravel自动将JSON字段转为数组【技巧】  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  IOS倒计时设置UIButton标题title的抖动问题  Laravel怎么进行数据库回滚_Laravel Migration数据库版本控制与回滚操作  如何用IIS7快速搭建并优化网站站点？  Laravel如何实现一对一模型关联？（Eloquent示例）  历史网站制作软件,华为如何找回被删除的网站？  打造顶配客厅影院，这份100寸电视推荐名单请查收  如何挑选优质建站一级代理提升网站排名？  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】