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. stm32上的Lava虚拟机开发进度汇报（4）

    这段时间颓废了,基本上没在弄这个东西. 主要是因为前段时间把代码基本上写完之后,但是问题一大堆,除了自己写的几个简单测试程序,其他现成的东西没有一个是能正常运行的,很是郁闷,也不知道哪里有错误,所以放 ...

  2. Codeforces Round #277 (Div. 2) A. Calculating Function 水题

    A. Calculating Function Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/4 ...

  3. C#获得和发送网站Session

    request = (HttpWebRequest)WebRequest.Create(url);                                         if (Const. ...

  4. U盘安装Win7 64位系统（笔记本+台式机亲测）

    准备工具: 1. Win7 64位系统的镜像文件(网上随便一搜即可,最好是纯净版,没有一堆乱七八糟的内置软件) 2. 4G以上的U盘一个 所用软件: 老毛桃(官网下载) 具体步骤: 1.数据备份(将原 ...

  5. 开源 java CMS - FreeCMS2.3 Web页面信息採集

    原文地址:http://javaz.cn/site/javaz/site_study/info/2015/23312.html 项目地址:http://www.freeteam.cn/ Web页面信息 ...

  6. cocos2d-x 资源路径研究

    调用cc.FileUtils:getInstance():addSearchResolutionsOrder("src"); 加入�一个搜索路径,就能够直接载入src文件夹下的资源 ...

  7. Android 实现书籍翻页效果----升级篇

    自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...

  8. C/C++产生随机数

    <一> C/C++如何产生随机数:这里要用到的是rand()函数, srand()函数,C语言/C++里没有自带的random(int number)函数. (1)  假设你仅仅要产生随机 ...

  9. 【Github教程】史上最全github用法：github入门到精通

    原文 http://www.eoeandroid.com/thread-274556-1-1.html [初识Github] 首先让我们大家一起喊一句"Hello Github". ...

  10. C# 之 将string数组转换到int数组并获取最大最小值

    1.string 数组转换到 int 数组 " }; int[] output = Array.ConvertAll<string, int>(input, delegate(s ...