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. Keil C51基本数据类型

  2. cdoj 1255 斓少摘苹果 贪心

    斓少摘苹果 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1255 Descr ...

  3. HDU 5029 Relief grain 树链剖分打标记 线段树区间最大值

    Relief grain Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid= ...

  4. C#实现注销、重启和关机代码

    首先要导入对命名空间 using System.Runtime.InteropServices; 的引用 [StructLayout(LayoutKind.Sequential, Pack = 1)] ...

  5. delphi ExecWB

    TWebBrowser.ExecWB 关键点 procedure ExecWB(cmdID: OLECMDID; cmdexecopt: OLECMDEXECOPT); overload; 实现过程 ...

  6. android151 笔记 3

    34. 对android虚拟机的理解,包括内存管理机制垃圾回收机制. 虚拟机很小,空间很小,谈谈移动设备的虚拟机的大小限制 16M , 谈谈加载图片的时候怎么处理大图片的,压缩. 垃圾回收,没有引用的 ...

  7. Android & Eclipse FAQ

    一.eclipse中格式化代码快捷键Ctrl+Shift+F失效的解决办法 当我要格式化代码的时候,右键-source-format能够起效,但ctrl+shift+f不好使了. google之后来发 ...

  8. wpf linq数据库无法插入

    最近做wpf应用程序,遇到一个很奇怪的问题,我用代码往数据库里插入数据成功了,但去vs的服务器资源管理器里查看数据库总是最开始的样子,什么都没有插入进去,然后就检查代码,打日志查看sql语句,发现都没 ...

  9. DOM+Javascript一些实例

    1.内容+遮罩层+悬浮对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  10. 大文件读取方法（C#）

    之前都是用StreamReader.ReadLine方法逐行读取文件,自从.NET4有了File.ReadLines这一利器,就再也不用为大文件发愁了. File.ReadLines在整个文件读取到内 ...