导航栏引导程序 3 中的品牌徽标中心

Question

是否可以在 bootstrap 3 中将品牌名称置于菜单项中间？例如有四个菜单项，我想要左侧的两个项目，右侧的两个项目和这两个菜单链接中间的品牌名称。提前感谢您的帮助。

Answer 1

第 1 步将<div class="pull-left"> 包裹在左侧您想要的两个图标上

第 2 步将此 div 移到 <a class="navbar-brand" 之前

第 3 步 将<div class="pull-right"> 包裹在右侧所需的两个图标周围。确保此div 遵循navbar-brand

这个方法可以帮到你，不过最好把相关代码贴在这里。

希望这会有所帮助！

Answer 2

您可以使用nav-justified 类...

<div class="navbar">
  <ul class="nav nav-justified">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Brand</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

演示：http://bootply.com/105175

Answer 3

像我的代码那样做。从navbar-header 中取出带有navbar-brand 的锚标记，并将其放在关闭的div 之后。就像下面的代码一样。 导航栏代码

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
  </div>
</nav>

将此代码放入您的 css 文件中

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    mar
}

这是工作示例的链接 http://www.bootply.com/98314

Answer 4

您也可以使用更简单的方法，只需设置一个百分比：

.navbar-brand {
  position: absolute;
  left: 50%;
}

旁注：我没有用 IE 测试过。通常我不喜欢百分比，但是......它有效！