Question

在bootstrap 3中是否可以在菜单项中间居中使用品牌名称？例如，有四个菜单项，我想在左侧有两个项目，在右侧有两个项目，在这两个菜单链接的中间有品牌名称。事先要求帮助。

Answer 1

第1步在左侧的两个图标周围包裹<div class="pull-left">

第2步在<a class="navbar-brand"

之前移动此div

第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-brand中获取navbar-header的锚标记，并将其放在结束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测试过。通常我不喜欢百分比，但是......它有效！

navbar bootstrap中的品牌标识中心3

4 个答案:

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