如何在 Bootstrap 3.2 的导航栏中将品牌形象与其他元素居中？答案

【问题标题】：How can I center a brand image with other elements in Bootstrap 3.2's navbar?如何在 Bootstrap 3.2 的导航栏中将品牌形象与其他元素居中？
【发布时间】：2014-07-24 13:11:47
【问题描述】：

首先，这是我想要完成的：

Example http://www.n2media.com/img/header-example.jpg

我希望在大屏幕上看到这种外观，然后在移动设备上恢复到默认的 Bootstrap 导航栏：

Example2 http://www.n2media.com/img/header-example-mobile.jpg

我可以通过关注this example.来放大徽标

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

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

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

但是我无法让navbar-brand 元素在所有简单链接之间居中。即使我这样做了，我也不确定如何将其从小屏幕的折叠元素中排除。

【问题讨论】：

前几天我就这样做了，但无法启动 bootply，因此我可以检索它。如果你明天还没有解决这个问题，我会再试一次。
这里有一些关于 Bootply 的例子 - bootply.com/oJI0QzytvR, bootply.com/Sa1pWiXH9T

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

为了使默认浮动的 Bootstrap 导航列表项水平居中，您可以将整个列表包装在相对定位的 div 中，或者删除浮动并应用display: inline-block。在我给出的示例中，我使用了相对定位的 div，然后在与移动菜单出现时相同的媒体断点处将其清除，因为我认为它更简单一些。

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;
   }
}

【讨论】：

这对我来说非常有效。我希望避免重复该元素，但这对我来说并不是一个交易破坏者。谢谢！

【解决方案2】：

最简单的解决方案可能是复制您的徽标，一次在 Bootstrap 的库存“品牌”位置，一次在导航栏的 <li> 元素中，然后使用 .hidden-xs 和 .visible-xs 类来显示或隐藏它，具体取决于在设备上。 Bootply 似乎已关闭，因此无法显示有效的 DEMO，但这应该可以做到（或接近）

<div class="navbar-header">
  <a class="navbar-brand visible-xs" href="#"><img src="logo.jpg" /></a>
  <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>
</div>
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li class="hidden-xs"><a href="#"><img src="logo.jpg" /></a></li>
  </ul>

【讨论】：