导航栏中的中心品牌，每侧都有项目[关闭]

Question

我正在尝试将包含徽标的品牌置于导航栏中。我本质上想要一个带有菜单项的居中品牌（例如，品牌左侧有两个菜单项，右侧有两个菜单项）。

我已经尝试了几种方法，例如：Wrap Bootstrap navbar list items around centered brand image，它可以工作，但我更喜欢没有 javascript 的解决方案。

我也尝试过类似的方法

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

.navbar-brand {float:none;}

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

我还尝试将徽标添加到菜单项，虽然这适用于台式机，但它在移动设备上看起来不太好，因为它是一个普通的菜单项，因此是下拉菜单的一部分。

以下是我尝试过的几个示例：http://www.bootply.com/114800 和 http://www.bootply.com/114804。

如何做到这一点？

Answer 1

我找到了解决办法！这与我最初所做的非常相似，但我添加了 CSS，使其也可以在移动设备上运行。

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

<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 类以使其仅在较低分辨率下可见

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

然后我有以下 CSS 来支持它。它所做的只是简单地从导航中隐藏徽标并显示默认品牌

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

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

Answer 2

这是我用于 3 个部分的一些 css 示例（将一个部分置于中间）。如果您要尝试通过浮动来实现此目的，则需要浮动所有元素，以使它们彼此相对。我把它们放在一个 .blocky 类的 div 中。

（编辑）：我添加了一些信息以确保以您为中心。从技术上讲，您可以取消右侧部分类，然后将左侧部分和中间部分放在之后，但有一次我正在使用正确的类来清除某些东西。所以，随心所欲地玩吧。

<div class="blocky">
     <div class="leftSection">
     </div>
     <div class="middleSection">
     </div>
     <div class="rightSection">
     </div>
</div>

如果您需要进一步解释，或者我是否可以更清楚地说明，请告诉我。顺便说一句，css 中的清除是为了确保没有其他任何东西最终放置在这个对齐中，当然填充、边距和宽度数字都可以更改，或者在某些情况下完全取消。

.blocky
{
  overflow: auto;
  padding-right: 10px;
  margin-left: auto;
  margin-right: auto;
  float:none;
}
.leftSection
{
  float: left;
  width: 236px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom:20px;
  margin-top: 5px;
  clear: left;
 }

.rightSection
{
  float: right;
  width: 236px;
  margin-bottom:20px;
  margin-top: 5px;
  clear:right;
}

.middleSection
{
  float: left;
  width: 236px;
  padding-right: 10px;
  margin-bottom:20px;
  margin-top: 5px;
}