导航栏中的中心品牌，两侧各有一个项目 [英] Center brand in navbar with items on each side

问题描述

我正在尝试将导航栏中包含徽标的品牌居中.我本质上想要一个中心品牌，周围带有菜单项(例如，品牌左侧的两个菜单项和右侧的两个菜单项).

I am trying to center my brand containing a logo in my navbar. I essentially want a centered brand with menu items surrounding it (eg. two menu items to the left and two to the right of the brand).

我尝试了以下几种方法: Wrap Bootstrap导航栏会在中心品牌形象周围列出项目，并且可以，但是我非常希望没有javascript的解决方案.

I have tried several things such as this: Wrap Bootstrap navbar list items around centered brand image, and it works, but I would very much prefer a solution without javascript.

我也尝试过这样的事情

.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
}

.navbar-brand {float:none;}

但这只会使品牌居中，并且不会在菜单项之间移动品牌，因此会堆叠在菜单项之上.

but this only centers the brand, and does not move it in between the menu items, therefore stacking on top of them.

我还尝试过将徽标添加到菜单项中，尽管它在台式机上可以使用，但在移动设备上看起来并不好，因为它是普通菜单项，因此是下拉菜单的一部分.

I have also tried just adding the logo to a menu item, and while this works on desktops, it does not look very good on mobile devices since it is an ordinary menu item and is therefore a part of the drop down menu.

以下是我尝试过的一些示例: http://www.bootply.com/114800 和 http://www.bootply.com/114804 .

Here's a couple of examples of what I have tried: http://www.bootply.com/114800 and http://www.bootply.com/114804.

这怎么办?

推荐答案

我找到了解决方案！这与我最初所做的非常相似，但是我添加了CSS，使其也可以在移动设备上工作.

I found a solution! This is quite similar to what I did first, but I added CSS that will make it work on mobile devices too.

首先，我只是在其他菜单项之间添加了一个菜单项

Firstly, I simply added a menu item between my other menu items

<div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="logo"><a href="#"><img src="img/logo.png"></a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#contact">Something</a></li>
      </ul>
</div><!--/.nav-collapse -->

像这样.我还在引导导航栏中保留了默认的常规品牌，但添加了visible-xs类以使其仅在较低分辨率下可见

like so. I also kept the normal brand that is default in the bootstrap navbar, but added the visible-xs class to make it visible on lower resolutions only

<a class="navbar-brand visible-xs" href="#"><img src="img/logo.png"></a>

然后我有以下CSS来支持它.它所做的只是在导航中隐藏徽标，而是显示默认品牌

Then I have the following CSS to support it. All it does is simply hide the logo from the navigation and display the default branding instead

@media (max-width: 768px) {
    .navbar-nav .logo {
        display:none;
    }
}

.navbar-nav .logo {
    opacity: 1;
    vertical-align: middle;
}

这篇关于导航栏中的中心品牌，两侧各有一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！