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>

Bootstrap两端对齐的导航实例的更多相关文章

  1. bootstrap 两端对齐的导航

    您可以在屏幕宽度大于768px时,通过在分别使用.nav .nav-tabs或.nav .nav-pills的同时使用class.nav-justified,让标签式或胶囊式导航菜单与父元素等宽,在更 ...

  2. Bootstrap<基础十六> 导航元素

    Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...

  3. BootStrap学习(3)_导航菜单

    一.导航元素 1.表格导航或标签 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. <!DOCTYPE html> <html xmlns= ...

  4. CSS两端对齐

    前面的话   两端对齐在导航条Tab的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex   弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端 ...

  5. CSS图片两端对齐，自适应列表布局末行对齐修复实例页面

    写在前面 前端开发,图片两端对齐,是十分常见的,也是十分痛苦的,我试过好多方法,通过整理,认为下面还是比较靠谱的,在实践中大家可以试试,欢迎一起学习,一起进步 HTML代码 HTML代码非常简单,用的 ...

  6. Bootstrap(7) 输入框和导航组件

            一．输入框组件 文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. //在左侧添加文字 <!-- //在左侧添加文字 --> ...

  7. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  8. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

  9. bootstrap 文本对齐风格

    Bootstrap通过定义四个类名来控制文本的对齐风格: ☑   .text-left:左对齐 ☑   .text-center:居中对齐 ☑   .text-right:右对齐 ☑   .text- ...

随机推荐

  1. Enhancing the Scalability of Memcached

    原文地址: https://software.intel.com/en-us/articles/enhancing-the-scalability-of-memcached-0 1 Introduct ...

  2. POJ 2420 A Star not a Tree? 爬山算法

    B - A Star not a Tree? Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/co ...

  3. Jquery 回到顶部

    转:http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html 用jQuery实现渐隐渐显的返回顶部效果(附多图)   先来看几个图片 ...

  4. linux之chmod

    文件/目录权限设置命令:chmod 这是Linux系统管理员最常用到的命令之一,它用于改变文件或目录的访问权限.该命令有两种用法: 用包含字母和操作符表达式的文字设定法 其语法格式为:chmod [w ...

  5. C#轻型ORM框架PetaPoco试水

    近端时间从推酷app上了解到C#轻微型的ORM框架--PetaPoco.从github Dapper 开源项目可以看到PetaPoco排第四 以下是网友根据官方介绍翻译,这里贴出来. PetaPoco ...

  6. struts2.1笔记03：AOP编程和拦截器概念的简介

    1.AOP编程 AOP编程,也叫面向切面编程(也叫面向方面):Aspect Oriented Programming(AOP),是目前软件开发中的一个热点,也是Spring框架中的一个重要内容.利用A ...

  7. html笔记01：顺序和无序列表

    <!DOCTYPE html> <html> <body> <li>Yellow <ul><li>Wet soil</li ...

  8. PHP中使用kindeditor

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome. Safari.Opera等主流浏览器.KindEditor ...

  9. obj 转为Json 时间格式自定义

    var tb = evnWarningBll.GatWarning();             var  timeFormat = new IsoDateTimeConverter();       ...

  10. iaas,paas,saas理解

    IaaS.PaaS.SaaS多次看到这几个单词,今天仔细看看来, ​这几个词和云计算相关:1,iaaS,Hardware-as-a-Service,信息,硬件服务,服务器,存储和网络硬件,网络存储,带 ...