Question

我有一个想法，不知道如何让它发挥作用。

我的网站上有一个引导导航栏，其中包含链接和一个＆＃34;品牌＆＃34;。使用此修改，品牌在导航栏中居中。 Bootply

而不是像这样设置导航栏：

{（link）（link）（link）（....一堆空的空间......）（品牌）（....一堆空的空间......）（链接）（链接）（链接）}

我希望导航栏设置如下图所示。

{（....一堆空的空间....）（链接）（链接）（链接）（品牌）（链接）（链接）（链接）（....一堆空的空间.. ..）}

我对编码很陌生，所以请给我一些时间来回答你可能遇到的任何问题。谢谢！

Answer 1

只需在第一个链接的左侧添加填充。

Answer 2

<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>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">BRAND</a></li>
      <li><a href="#">Center 3</a></li>

    </ul>
  </div>
</nav>

<强> CSS

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}

小提琴 http://jsfiddle.net/52VtD/9483/

Navbar链接周围的中心品牌

2 个答案: