导航栏中的中心品牌，每侧都有项目

Question

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

我已经尝试了几件事，例如：围绕居中的品牌形象包装引导导航栏列表项，并且它有效，但我非常喜欢没有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;
}