Question

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

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

我希望在大屏幕上看一下，但在移动设备上时会回到默认的Bootstrap导航栏：

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

来扩大徽标

我还发现了许多让简单链接集中的方法。我正在使用的是：

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

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

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

Answer 1

最简单的解决方案可能是复制您的徽标，一旦在Bootstrap的股票＆＃39;品牌＆＃39;位置，一旦在导航栏的<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>

Answer 2

如果您乐意使用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;
   }
}

如何在Bootstrap 3.2的导航栏中将品牌图像与其他元素集中在一起？

2 个答案: