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. 解决mysql 1040错误Too many connections的方法

    从官方文档知道linux上面编译安装的mysql默认的连接为100个,这样对于网站的需求来说是远远不够的. mysql官方告诉我们需要修改max_connections的值,那么我们怎么去修改呢?有两 ...

  2. Codeforces Round #313 (Div. 2) A. Currency System in Geraldion 水题

    A. Currency System in Geraldion Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/c ...

  3. w3cmark前端精彩博文周报 10.13-10.19

    w3cmark推出每周精选前端博文推荐,通过阅读别人的代码,学习别人的经验,提升自己的水平.欢迎关注 @前端笔记网 微博.其实如果是关注我们微博的朋友都对下面的文章熟悉,因为我们会一旦发现有价值的.精 ...

  4. Swift学习笔记（一）搭配环境以及代码执行成功

    1.Swift是啥? 百度去!度娘告诉你它是苹果最新推出的编程语言,比c,c++,objc要高效简单.可以开发ios,mac相关的app哦!是苹果以后大力推广的语言哦! 2.Swift给你带来什么机会 ...

  5. Android 滑动效果高级篇（七）—— 华丽翻页效果

    By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫,在android上也有像laputa和ireader ...

  6. 华为 真机当作测试机 打开log开关

    拨号界面输入*#*#2846579#*#*进入测试模式,点击"pyojectmeu"-点击第三个-"后台设置"-进入了之后-点击第2个-"log设置& ...

  7. 解析“extern”

    解析“extern” 1. 声明外部变量 现代编译器一般採用按文件编译的方式,因此在编译时,各个文件里定义的全局变量是 互相透明的,也就是说,在编译时,全局变量的可见域限制在文件内部.以下举一个简单的 ...

  8. qt 获取系统磁盘空间大小

    quint64 getDiskFreeSpace(QString driver) { LPCWSTR lpcwstrDriver=(LPCWSTR)driver.utf16(); ULARGE_INT ...

  9. Oracle_集合

    游标遍历select语句 set serveroutput on; declare type sp_test1_cursor is ref cursor; test1_cursor sp_test1_ ...

  10. liunx 文件相关

    一.linux中 文件属性以 l.b.c.d.开头的都是什么文件? lrwxrwxrwx 1 root root 11 Aug 20 08:38 core -> /proc/kcoredrwxr ...