Bootstrap两端对齐的导航实例
2023-02-19 12:17:13 时间
Bootstrap两端对齐的导航,样式剥离出来代码如下:
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 两端对齐的导航元素</title> <style> .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav:before, .nav:after { display: table;content: " "; } .nav:after { clear: both; } .nav:before, .nav:after { display: table; content: " "; } .nav:after { clear: both; } .nav li { position: relative; display: block; } .nav li a { position: relative; display: block; padding: 10px 15px; } .nav li a:hover, .nav li a:focus { text-decoration: none; background-color: #eee; } .nav li.disabled a { color: #999; } .nav li.disabled a:hover, .nav li.disabled a:focus { color: #999; text-decoration: none; cursor: not-allowed; background-color: transparent; } .nav .open a, .nav .open a:hover, .nav .open a:focus { background-color: #eee; border-color: #428bca; } .nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } .nav li a img { max-width: none; } .nav-pills li { float: left; } .nav-pills li a { border-radius: 4px; } .nav-pills li + li { margin-left: 2px; } .nav-pills li.active a, .nav-pills li.active a:hover, .nav-pills li.active a:focus { color: #fff; background-color: #428bca; } .nav-justified{ width:100% } .nav-justified li{ float:none } .nav-justified li a{ margin-bottom:5px;text-align:center } .nav-justified .dropdown .dropdown-menu{ top:auto;left:auto } @media(min-width:768px){ .nav-justified li{ display:table-cell; width:1% } .nav-justified li a{ margin-bottom:0 } } </style> </head> <body> <p>两端对齐的导航元素</p> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul> </body> </html>
相关文章
- 【数据预处理】基于Pandas的数据预处理技术【前七个任务】
- SpringBoot:模块探究之spring-boot-devtools
- ginbinder 一次绑定 gin request 中的所有需要的数据
- ginbind 的实现过程-一起来看gin源码吧
- typescript 中的时间处理
- typescript 中的 const assertions
- 前端容器化第三弹 - vue3 项目容器化 - 通过 meta 注入后端地址
- 你会吗? 为什么长度为零的切片sl, 可以是用 sl[0:5] 而不报错
- map中的值对象虽然不能修改,但是可以替换
- GET 请求也能传递 Body 数据
- K8S嫁衣神功 - kustomize 的实用小技巧
- Dockerfile构建指南-怎样构建一个适用企业级的镜像
- CronJob 和 Job 的 Pod 退出保留时间
- 【活动】腾讯云「轻云之上,无尽想象」系列活动盛大来袭
- K8S 使用 TTL 控制器自动清理完成的 Job Pod
- k8sailor - 01 搭建 k3s 集群
- k8sailor - 03 连接 k3s 集群获取 deployment 信息
- k8sailor - 02 使用 cobra 管理命令与参数集群连接参数
- k8sailor 04-使用 gin 初始化一个 API Server
- k8sailor - 05 设计 RESTful API 和 HTTP 响应数据