先看上面图片的效果,下面是代码:
.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