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 -->

像这样。我还保留了bootstrap导航栏中默认的普通品牌，但添加了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;
}

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

2 个答案: