先看上面图片的效果,下面是代码:
.navbar .navbar-nav { display: inline-block; float: none; } .navbar .navbar-collapse { text-align: center; }
Edit: if you only want this effect to happen when the nav isn't collapsed surround it in the appropriate media query.
或者:
@media (min-width: 768px) { .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } }
源自:http://stackoverflow.com/a/18778769
DEMO 如下: Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
更多参考:
Bootstrap 3: 使用注意box-sizing细节及解决方法
Bootstrap 3: 图标转换事件 Change icons when toggle
Bootstrap 3 : 图片上传预览 image upload preview
Bootstrap 字体图标 Bootstrap Glyphicon Components
本文转自: Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
相关推荐
bootstrap5-offcanvas-navbar:Bootstrap5:画布导航栏
Bootstrap 4 Responsive Web Design 英文azw3 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除
Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航
由于H5页面在使用bootstrap的自适应导致从高度上总是自动排列,导致登录框不能自动居中。项目中发现一个动态居中办法,很好用,可以让Bootstrap登录框自适应水平居中、垂直居中。
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果,有下拉菜单,大型菜单,侧边栏菜单,购物车菜单等,可以满足大部分网页导航菜单设计的需求。
右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap...
该资源为Bootstrap模态框练习的源码,里面包含了项目所需要的bootstrap.min.css、bootstrap.js、jquery-1.12.4.js文件
Bootstrap Responsive Web Dev with Bootstrap Bootstrap Responsive Web Dev with Bootstrap
只需将属性修改成"positionClass": "toast-top-center", 代码如下//toastr提示框 toastr.options = { "closeButton": false, "debug": false, "newestOnTop": false, "progressBar": false, "positionClass...
这是一款基于Bootstrap和Bootsnav的多级导航菜单。该多级导航菜单通过简单的CSS代码来对菜单进行美化,制作鼠标滑过的动画效果。
Fully responsive and works across all modern/supported browsers, devices Documentation on all available components, widgets, etc Easy development and tooling with Gulp workflow Components: All of ...
Bootstrap树形菜单JS代码特效
bootstrap前台悬浮左侧菜单简单html代码
今天要分享的这款CSS3下拉菜单就是基于Bootstrap的,下拉子菜单的外观也非常不错,同时菜单也具有3D立体的视觉效果。 下面我们一起来看看实现这款CSS3 3D菜单的过程和源码,代码主要由HTML、CSS和jQuery组成。 ...
下载过来的,改了一下,基本满足需求,访问地址: bootstrap-fileinput-master\examples\demo.html
codester-free-responsive-bootstrap-template.zip essentia.zip flatty.zip flat_theme.zip grayscale.zip landing-page.zip legend-by-Dzyngiri.zip link.zip modern-business.zip NiceAdmin.zip onassis.zip ...
BootstrapNavbar 帮助程序生成Bootstrap样式导航... 呈现导航栏时,BootstrapNavbar必须能够查询当前URL,例如,确定菜单项是否处于活动状态。 由于确定当前URL的方式因您是否使用Rails,Sinatra等而异,因此必须在某
Bootstrap Auto-Hiding Navbar是一款非常实用的在页面滚动时自动隐藏Bootstrap顶部导航菜单的jQuery插件。它通过扩展原生Bootstrap顶部固定导航菜单,使其在页面向下滚动时隐藏,向上滚动时又显示出来。
Bracket Responsive Bootstrap3 Admin VERSION 1.5 示例地址:http://themepixels.com/demo/webpage/bracket/index.html 自己整理的,赚点资源分,意思一下