您可以在屏幕宽度大于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. Qt测试代码执行时间

    ////////////////////////////////////////////////////////////////// QString _GetIntervalTime(QTime&am ...

  2. Lightoj1122 【数位DP】

    题意: 给你m个数,让你在里面挑n个组合,保证位数相差不超过2,求能够组合多少种情况: 思路: dp[i][j]代表第i个结尾为j的方案数. #include<bits/stdc++.h> ...

  3. opencv3.1 压缩并拼图

    必须有重叠才能拼,压缩越多,拼接越快 #include <opencv2\opencv.hpp> #include <opencv2\stitching.hpp> using ...

  4. 骨骼动画反向动力学(IK)的实现

    反向动力学,Inverse Kinematics,简称IK.简单地说,由父骨骼的方位和子骨骼的相对变换得到子骨骼的方位,称为正向动力学(Forward Kinematics,FK):而IK则是先确定子 ...

  5. [Xcode 实际操作]九、实用进阶-(13)调用相机并获取拍摄后的图片

    目录:[Swift]Xcode实际操作 本文将演示如何调用相机并获取拍摄后的图片. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首 ...

  6. suse 11 sp4 设置yast 安装源

    suse yast 软件管理工具,用户在初始安装系统时,可能会遗漏比较多的库和工具,那么为了方便大家日后可以随时添加,用户可以选择将安装ISO 文件添加到 suse 的yast 安装源上. 用户首先创 ...

  7. Git - .gitignore怎么忽略已经被版本控制的文件

    问题 如果某个文件已经存在于远程仓库了,也就是说某个文件已经被版本控制了,如果将该文件添加到.gitignore中,是无法生效的.因为.gitignore是用来控制尚未被纳入版本控制的文件,如果文件已 ...

  8. git 创建分支并关联远程分支

    从master分支,重新拉取出一个新的分支,名字为dev,具体命令如下: 1. 切换到被copy的分支(master),从服务器拉取最新版本 $git checkout master $git pul ...

  9. Spring Cloud Gateway VS Zuul 比较，怎么选择？

    Spring Cloud Gateway 是 Spring Cloud Finchley 版推出来的新组件,用来代替服务网关:Zuul. 那 Spring Cloud Gateway 和 Zuul 都 ...

  10. 2018百度之星初赛（A）2 度度熊学队列

    思路: 记录一下c++ stl中的双向链表list的各种用法. https://blog.csdn.net/fanyun_01/article/details/56881515 实现: #includ ...