Bootstrap 两端对齐的导航

两端对齐的导航

为标签页导航或胶囊式导航组件添加.nav-justified类，可以实现两端对齐的导航。在大于 768px 的屏幕上，导航将填满父元素的宽度，而且菜单项可以像表格的单元格一样自适应宽度。在小屏幕上，导航将呈现堆叠排列。如：

<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>

效果如图 3‑37所示：

图3-37 两端对齐的导航

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap 两端对齐的导航相关推荐

Bootstrap两端对齐的按钮组
两端对齐的按钮组 Bootstrap3两端对齐的按钮组可以将一组按钮拉长为相同的尺寸,并让整个按钮组填满父元素的宽度.对于按钮组中的按钮式下拉菜单也同样适用. 如果按钮组中的按钮是 <a> ...
学习Bootstrap知识记录点-----导航菜单操作
2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 导航元素本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 ...
css如何实现文字两端对齐,CSS如何实现文字两端对齐效果？
想要实现文字两端对齐效果,可以使用CSS的text-align属性.设置text-align: justify;即可实现文字两端对齐效果. 两端对齐在导航nav的制作中非常常用,那么如何实现两端对齐效 ...
html语言两端对齐咋写,CSS如何实现文字两端对齐效果？
两端对齐在导航nav的制作中非常常用,那么如何实现两端对齐效果?下面本篇文章就来给大家介绍一下使用CSS实现文字两端对齐效果的方法,希望对大家有所帮助. 想要实现文字两端对齐效果,可以使用CSS的te ...
php中css样式两端对齐,CSS两端对齐
前面的话两端对齐在导航Nav的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex 弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端对齐.可以 ...
不定长度导航的两端对齐
1.导航按钮的字数不固定有长有短,且个数不确定.布局比较麻烦. 2.利用flex 进行布局.兼容性还是比较差,不太稳定,确保flex生效的前提下 ,不失为快速有效的办法,也比较推荐. 3.利用行内 ...
css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
css+分散,【原】css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...
如何使用Bootstrap构建画布外导航布局
Bootstrap旨在通过提供一些常用的Web组件来满足许多情况. 有按钮,响应式导航栏,选项卡,工具提示,轮播等. 尽管如此,即使Bootstrap提供了所有玩具,它仍然缺少一种非常流行的模式:离画 ...

Bootstrap 两端对齐的导航

两端对齐的导航

Bootstrap 两端对齐的导航相关推荐

最新文章

热门文章