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

最新推荐文章于 2021-10-08 18:31:13 发布

iteye_5904

最新推荐文章于 2021-10-08 18:31:13 发布

阅读量307

点赞数

分类专栏： Javascript /Jquery / Bootstrap / Web

本文链接：https://blog.youkuaiyun.com/iteye_5904/article/details/82671946

版权

Javascript /Jquery / Bootstrap / Web 专栏收录该内容

434 篇文章

订阅专栏

该博客介绍了如何在Bootstrap 3的响应式导航栏中实现菜单内容居中显示的方法，包括使用适当的媒体查询和代码示例。同时提供了相关Bootstrap 3的其他知识点链接，如box-sizing细节处理、图标切换事件和图片上传预览等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

.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