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

实例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>bootstrap历练实例： 两端对齐的导航菜单</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
<br /><br /><br />
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap 两端对齐的导航的更多相关文章

  1. Bootstrap两端对齐的导航实例

    Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  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. Bootstrap(7) 输入框和导航组件

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

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

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

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

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

  8. bootstrap 文本对齐风格

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

  9. Bootstrap学习-菜单-按钮-导航

    1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...

随机推荐

  1. 安装MySQL出现1045错误

    安装MySQL出现1045错误 一.运行环境 MySQL mysql-5.1.26-rc-win32 操作系统:Windows 7 X64 二.问题描述 安装MySQL过程中会涉及对root密码的设置 ...

  2. Android NDK开发指南（一） Application.mk文件

    http://www.cnblogs.com/yaozhongxiao/archive/2012/03/06/2381586.html Application.mk目的是描述在你的应用程序中所需要的模 ...

  3. 如何将含有byte数据项的结构存入MongoDb

    我们知道MongoDb不支持byte(BsonType中根本没有定义byte), 但是在实际生产环境中数据结构(特别是远古时代的数据结构)往往包含byte数据项. 这时候无法保存原有的数据结构,一般会 ...

  4. MySql 5.6 遇到的一些问题

    1. 卸载5.5之后,使用 mysql installer 时,没法设定 data directory .  最后再次删除mysql installer之后,使系统干净后才能重新安装, 然后界面出现了 ...

  5. 集合框架Collection<E>接口

  6. log日志中不打印异常栈的具体信息

    问题与分析 最近在查项目的log时发现报了大量的NPE(NullPointerException),诡异的是只log了Exception的类名,却没有具体的堆栈信息,以致于无法对该NPE异常进行准确定 ...

  7. iReport - 无法正常启动的解决方法

    问题与分析 最近需要用到iReport报表工具,但是在启动客户端时却发现只出现了启动界面,很快就界面消失没反应了.反复打开了好几次客户端,都无法正常打开.问了下同事,说是因为jdk升级的原因,以前项目 ...

  8. Gitlab备份，Crontab定时备份

    1:Gitlab备份非常简单,只需要一条命令就可以创建完整的备份 gitlab-rake gitlab:backup:create 使用以上命令,就相当于在/var/opt/gitlab/backup ...

  9. POJ-1020-Anniversary Cake

    链接:https://vjudge.net/problem/POJ-1020 题意: 给一个宽为s的正方形,再给n个变长为an的小正方形, 判断是否能将这n个小正方形完全填充到这个大正方形里面. 思路 ...

  10. 15 使用lambdas和闭包

    1       使用lambdas和闭包 1.1  定义闭包 闭包是一个代码块,代替了方法或类. groovy中的闭包基于后边的构造方式:{list of parameters-> closur ...