大佬教程收集整理的这篇文章主要介绍了html – 使bootstrap导航栏分隔符均匀分布,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML:
<li class="divider-vertical"><a href = "#">Contact Us</a></li>
CSS:
.divider-vertical { height: 50px; margin: 0 9px; border-left: 1px solid #F2F2F2; border-right: 1px solid #FFF; }
导航条代码:
<nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li><a href = "#">Home</a></li> <li class="divider-vertical"><a href = "#">About</a></li> <li class="divider-vertical"><a href = "#">Jobs</a></li> <li class="divider-vertical"><a href = "#">Contact Us</a></li> <li class="divider-vertical"><a href = "#">resources</a></li> </ul> </div> </nav>
.divider-vertical { height: 50px; margin: 0 0 0 9px; padding: 0 0 0 9px; border-left: 1px solid red; }
一个更好的方法,可以节省你一点点html写作将是做类似以下的事情:
>从HTML中删除.divider-vertical类
>设置.li元素的样式,在边框的同一侧使用边距和填充 – 在本例中为右边
>我们将使用Pseudo class:last-child从最后一个菜单项中删除一些css属性
li { border-right: 1px solid red; margin: 0 9px 0 0; padding: 0 9px 0 0; } li:last-child { border-right: none; }
<link href="@R_618_10107@://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li><a href = "#">Home</a></li> <li><a href = "#">About</a></li> <li><a href = "#">Jobs</a></li> <li><a href = "#">resources</a></li> </ul> </div> </nav>
以上是大佬教程为你收集整理的html – 使bootstrap导航栏分隔符均匀分布全部内容,希望文章能够帮你解决html – 使bootstrap导航栏分隔符均匀分布所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。