如何在Bootstrap 3.2的navbar中使用其他元素来定位品牌形象？

问题描述

首先，这是我要完成的工作：

我希望在大屏幕上看到这个样子，然后回到默认的Bootstrap导航栏mobile：

我可以通过以下这个例子。

我也找到了很多方法来获得简单的链接中心。我使用的是这个：

  .navbar.center .navbar-inner {
 text-align：center ; 
} 
 
 .navbar.center .navbar-inner .nav {
 display：inline-block; 
 float：none; 
} 
  

但是我还没有得到 navbar-brand 元素居中在所有简单链接之间。

解决方案

如果你不知道如何使用它， 很乐意使用Bootstrap的Responsive Utilities，只需在两个地方贴上标志，您可以根据屏幕尺寸显示/隐藏标志，例如

为了水平居中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; 
} 
} 
  

First of all, this is what I'm trying to accomplish:

I'm hoping to have this look when on a large screen but then fall back to the default Bootstrap navbar when on mobile:

I was able to get the logo enlarge by following this example.

I've also found plenty of ways to get the simple links to be centered. The one I was using was this:

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

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

However I haven't been able to get the navbar-brand element to center between all of the simple links. Even if I do, I'm not sure how I can exclude it from the collapsing elements for small screens.

解决方案

If you're happy to use Bootstrap's Responsive Utilities and just stick the logo in two places, you could show/hide the logo depending on screen size like this.

In order to horizontally center Bootstrap's nav list items, which are floated by default, you could either wrap the entire list in a relatively positioned div, or remove the floats and apply display: inline-block. In the example I've given, I've used the relatively positioned div and then cleared it at the same media breakpoint as when the mobile menu appears because I think it's a bit simpler.

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的navbar中使用其他元素来定位品牌形象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！