您可以在屏幕宽度大于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. CvvImage在高级别的Opencv2.4.11下的配置以及错误解决办法。

    由于高版本的OpenCV2.4.11里取消了CImage(CvvImage),在此我们可以用老的版本替代. 在需要的地方引入 #include "CvvImage.h" 就可以用了 ...

  2. Unity Mecanim在大型mmo中的应用

    http://blog.csdn.net/langresser_king/article/details/37760091?utm_source=tuicool&utm_medium=refe ...

  3. PHP实现用户登录注册功能

    初学php做了一些比较常见且有用的页面,放在上面记录一下咯 我是用了bootstrap框架里面的模态框做注册登陆页面,这样页面比较美观 页面效果: 注册成功条件/功能: 1)用户名不能冲突 2)两次密 ...

  4. SQL基础培训实战教程[全套]

    学习简介:林枫山根据网上搜索资料进行参考,编写制作的SQL Server实操学习教程,欢迎下载学习. 下载链接目录如下: 进度0-SQL基础语法    下载学习文档 进度1-建数据表-美化版-2018 ...

  5. 下载devc++和codeblocks记录

    dev的安装包自己百度网盘里有 codeblocks官网  下载好后再解压即可,如果不是默认路径安装的话,还会出现检测不到编译器路径问题,解决办法在这.

  6. CF #541div2 E

    题目本质:忽略串的变化,只记载26个字母的相关变化. 解决方法: 在上一次与本次的转移过程中,情况并不多,主要取决于本次串的首尾字母,若不是本次的首尾字母,会被置1:如果是的话,分情况接一下并更新.另 ...

  7. web移动端滑动插件

    1.slip只有6.3k可以说是非常小了,主要是通过css3里面的transform来改变的位置,控制的是父容器,使用也非常简单,具体信息移步slip.js.一个简单的demo如下 <!DOCT ...

  8. Spring Security LDAP简介

    1.概述 在本快速教程中,我们将学习如何设置Spring Security LDAP. 在我们开始之前,了解一下LDAP是什么? - 它代表轻量级目录访问协议.它是一种开放的,与供应商无关的协议,用于 ...

  9. Super Mario（线段树离线区间k值）

    以前见过这题,没做出来,知道是离线处理,这次仔细想了下, 首先把出现的高度都map离散化一下,以离散化出来的数目g建树,把每个位置都开俩个vector,一个存以这个位置为L的询问,一个存以这个位置为R ...

  10. vuex 使用方法

    1.安装vuex扩展 : npm install vuex 2.在componets目录下新建 store.js 文件 import Vue from 'vue' import Vuex from ' ...