bootstrap 导航条居中
记录一下bootstrap导航条里面的导航按钮居中,并响应小屏幕
1:.navbar-collapse 设置 文字居中 text-align: center;
2:导航容器 .navbar-nav,设置为行内块元素 display: inline-block;
3:导航选项 li, 设置为块元素 display: block;
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top nav-justified"><div class="container customContainer"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu"aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand logo text-center" href="#"><img alt="Brand" src="./img/logo.png"></a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="menu"><ul class="nav navbar-nav"><li><a href="javascript:void(0)"> 嘎嘎嘎嘎嘎</a></li><li><a href="tel:13922547840" class="icon-tel"> 13911111111 禤先生</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">微信二维码 <span class="caret"></span></a><ul class="dropdown-menu qrCode"><li><img src="./img/logo.png"></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>
#menu {text-align: center;
}.navbar-nav {display: inline-block;float: none;text-align: center;
}.navbar-nav li {display: block;
}
项目地址:https://gitee.com/xuan168/bootstrapNav.git
效果图:
bootstrap 导航条居中相关推荐
- 解决bootstrap导航条居中显示的问题
<!--第一种方法--> <div class="navbar-collapse collapse" style="text-align: center ...
- Bootstrap 导航条的组件
Bootstrap的导航条组件有站点名称.导航链接.表单.搜索表单.下拉菜单等,可以根据需要选择使用. 所有导航组件默认按照在HTML中定义的顺序,从左到右依次排列.如果需要,可以使用 .pull-l ...
- Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...
- Bootstrap导航条学习使用(一)
本文实例为大家分享了Bootstrap导航条的具体代码,供大家参考,具体内容如下 navbar: 导航条的基础样式 nav navbar-nav :导航条里菜单的的固定样式组合的class navba ...
- 鼠标点击出现下拉菜单html,Bootstrap导航条可点击和鼠标悬停显示下拉菜单
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
- Bootstrap导航条、分页导航
[导航条navbar] 在bootstrap中导航与导航条在外观方面差不多,但在实际应用时,导航条却要复杂的多. 导航条制作方法: 第一步:首先在制作导航的列表(<ul class=" ...
- Bootstrap导航条中组件的排列
组件的排列 通过添加.navbar-left和.navbar-right工具类,可以让导航链接.表单.按钮或文本等对齐.两个类都会通过 CSS 设置特定方向的浮动样式.例如,导航条中包含两个导航链接, ...
- Bootstrap导航条所支持的组件
支持的组件 Bootstrap3的导航条中,可以包含站点名称.导航链接.表单.下拉菜单.文本.非导航链接等组件,可以根据需要选择使用. 1.站点名称 站点名称通过 .navbar-brand 的链接元 ...
- Bootstrap 导航条
导航条(navbar)是一个常用的组件,也是 Bootstrap 的特色功能.导航条一般包含站点名和几个导航链接.还可以对导航条加以扩展,添加表单控件和下拉菜单等. 基本导航条 基本导航条中包含站点名 ...
最新文章
- CentOS安装Navicat
- hadoop:could only be replicated to 0 nodes, instead of 1
- tableau货架图制作_举个栗子!Tableau技巧(33):实用漏斗图的三种制作方法
- 一个button同时执行多个有返回值的函数的解决方法(return false; or return true;)...
- 6.2.2 构造函数模式
- C++--第14课 - 专题二经典问题解析
- 1811114每日一句
- matlab 有限域函数,matlab有限域上的运算.docx
- Dos下的edit命令
- vue ionic css,Ionic vue 初探
- This service allows sftp connections only
- Kafka高性能之页缓存(page cache)使用
- 笔记本电脑计算机怎么放在桌面,苹果电脑怎么把文件放在桌面
- 鼠标计算机无法识别,计算机无法识别usb鼠标
- stm32 FPU和DSP
- iOS开发笔记 - 工具篇
- es 按距离查询排序
- 360网页服务器的根目录,360浏览器收藏夹路径在哪里
- Polyworks脚本开发学习笔记(十五)-用Python连接Polyworks的COM组件
- 漫画:什么是 “可控核聚变” ?