Css 在Bootstrap 3.2'中，我如何将品牌形象与其他元素放在一起；是导航栏吗？

首先，这是我想要实现的目标：

我希望在大屏幕上看到这一点，但在移动设备上使用默认的引导导航栏：

我能够得到的标志放大以下

我还找到了很多方法来让简单的链接居中。我使用的是：

.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
}

---

但是，我无法将

navbar brand

元素置于所有简单链接之间的中心位置。即使我这样做了，我也不确定如何将其从小屏幕的折叠元素中排除。

最简单的解决方案可能是复制您的徽标，一次在Bootstrap的库存“品牌”位置，一次在导航栏的

元素中，然后使用

.hidden xs

和

.visible xs

类根据设备显示或隐藏它。Bootply似乎已关闭，因此无法显示正在运行的演示，但这应该可以做到（或接近）

如果您乐于使用Bootstrap的响应实用程序，只需将徽标粘贴在两个位置，您可以根据屏幕大小显示/隐藏徽标，如

为了水平居中引导的导航列表项（默认情况下是浮动的），您可以将整个列表包装在相对定位的div中，或者删除浮动并应用

display:inline block

。在我给出的示例中，我使用了相对定位的div，然后在出现mobile菜单时的媒体断点处清除它，因为我认为它更简单一些

CSS

#nav-wrapper {
    float: left;
    position: relative;
    left: 50%;
}
.navbar-nav {
    position: relative;
    left: -50%;
}
@media (max-width: 769px){
    .navbar-inverse .navbar-brand img {
        height: 100%;
    }
    .navbar-inverse .navbar-brand {
        padding: 0;
    }
    #nav-wrapper {
        float: none;
        position: static;
    }
   .navbar-nav {
       position: static;
   }
}

---

前几天我刚做了这个，但无法启动bootply，所以我可以找回它。如果你明天还没有弄明白，我会再试一次。这里有几个关于Bootply-的例子，这对我来说非常有效。我希望避免重复这个元素，但这对我来说不是一个破坏者。谢谢

#nav-wrapper {
    float: left;
    position: relative;
    left: 50%;
}
.navbar-nav {
    position: relative;
    left: -50%;
}
@media (max-width: 769px){
    .navbar-inverse .navbar-brand img {
        height: 100%;
    }
    .navbar-inverse .navbar-brand {
        padding: 0;
    }
    #nav-wrapper {
        float: none;
        position: static;
    }
   .navbar-nav {
       position: static;
   }
}