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. 80端口被NT kernel & System 占用pid 4

    前段时间停止了Apache,结果在打开的时候发现无法打开,80端口被占用,于是win+r 运行cmd 输入netstat -ano 可以看到80端口被PID4占用,于是打开任务管理器-进程-查看,选择 ...

  2. java.io.File类

    java.io.File类 1.凡是与输入.输出相关的类.接口等都定义在java.io包下 2.File是一个类.能够有构造器创建其对象.此对象相应着一个文件(.txt .avi .doc .ppt ...

  3. windows command ftp 中文文件名乱码解决方法

    有时,使用临时的windows机子,要进行ftp简单操作,但又不想装其它的ftp-client,可以直接使用windows command中的命令ftp来操作. 通常,ftp服务器按标准,使用utf8 ...

  4. delphi execCommand

    WebBrowser1.Document as IHTMLDocument2 关键点 function execCommand(const cmdID: WideString; showUI: Wor ...

  5. memset用法详解(转）

    问题描述: int * cow = new int[n+1]; memset(cow,0,(n+1)*4); 将N+1个元素置成0,为什么不行 memset是对一个字节的int4个字节,因此*4 但是 ...

  6. JavaScipt call和apply用法

    转:http://www.cnblogs.com/wupeng/p/3477879.html Javascript call与apply记录 [注]:记录自己对javascript中call与appl ...

  7. Angular 1.2.27在IE7下的兼容问题

    最近负责公司的一个国外项目,老外指定要用angular,并且要兼容到IE7. 项目使用的是Angular版本是1.2.27,为了能在IE7下跑,需要做如下配置 1. 加载json2.js 2. 加载h ...

  8. 类的this指针 总结

    类的this指针有以下特点: (1)this只能在成员函数中使用 全局函数,静态函数都不能使用this. 实际上,成员函数默认第一个参数为T* const this. 如: class A { pub ...

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

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

  10. Cable master

    Description Inhabitants of the Wonderland have decided to hold a regional programming contest. The J ...