August 8, 2016

Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar

By Gideon Javascript /Jquery / React / Bootstrap / Web 0 Comments

先看上面图片的效果，下面是代码：

.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: 使用注意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

JavaScript 语言基础知识点总结（思维导图）
目录[-] （1）javascript 数组（2）函数基础（3）运算符（4）流程语句（5）正则表达式（6）字符串函数（7）数据类型…
Bootstrap 字体图标 Bootstrap Glyphicon Components
基本用法： Envelope icon: Search icon: <span…
移动前端工作的那些事---前端制作篇之框架篇
为了更好的提升用户体验，移动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点：一、Sencha Touch框架是一个重量级的框架、它上手较难，代码复杂，并且需要较强的程序基础才能学习，最开始的时候因为一个项目，想使用Sencha Touch框架，后来工期实在太紧张，根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高，运行起来的速度一般，需要长时间的学习且需要水平较高的程序基础才行。所以不太适合前端制作人员的使用。我会在以后的机会单开一篇关于它的使用demo。二、JQTouch是一个轻量级框架、纯jquery写法，上手比较容易，代码容易理解，加载速度也很快，缺点是配合的移动端效果插件较少，需要很多外部的插件相结合，另外，个别插件还需要解决与框架之间的兼容问题。它的最大的一个弊端就是可利用和变通的布局较少。三、Jquery-moblie也是一个轻量级框架、纯jquery写法，上手容易，代码容易理解，但由于其绑定的前端效果插件过多，且代码结构有些臃肿，造成加载速度很慢。尤其是在android系统上测试，速度很慢。用户体验效果不太好，它比较适合开发IPAD或是IOS系统的高端机型。四、jqMobi也是一个轻量级框架、它的语言基于jquery语言。并对其进行了简化，更有利于在移动设备上进行应用，并且速度很流畅。上手也比较容…

Just Code

Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar

About Author

Gideon

Add a Comment

Related Posts

Related Posts

About Author

Gideon

Add a Comment