Question

我正在使用带有3组项目的bootstrap 3.3.7导航栏：

A）在左边（1项），
B）居中（4项），
C）在右边（1项）

所以我有：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav tabs">
            <!-- A) here are the left aligned LIs (float: left) -->
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <!-- C) here are the right aligned LIs (float: right) -->
        </ul>

        <ul class="nav navbar-nav navbar-center tabs">
            <!-- B) here are the right aligned LIs (float: none; text-align: center; font-size:0) -->
        </ul>
    </div>
</nav>

正如评论中所说，这是我的CSS：

.navbar-nav > li {
    float: left;
    position: relative;
}
.navbar-right {
    float: right!important;
    margin-right: -15px;
}
.navbar-nav.navbar-center {
    float: none;
    text-align: center;
    font-size: 0;
}
.navbar-nav.navbar-center > li {
    vertical-align: top;
    display: inline-block;
    float: none;
    font-size: 1.3rem;
}

这是一个JSFiddle显示它：https://jsfiddle.net/m5s8ov8j/（请拖放JSFiddle居中的垂直分隔符到左侧以查看结果，因为Bootstrap将nevbar变成汉堡包菜单。）

现在要求我在组（B）和（C）之间插入一组新的2项，有2个条件：

组（B）（居中）必须保持居中，
新组必须位于（B）的最后一项和（C）的第一项之间。

我该怎么办？

Answer 1

我认为不能单独使用CSS，但这是一个使用JavaScript的解决方案。绝对定位新UL，然后确定其位置应该是什么我把它放在onresize事件中，这样当用户使窗口更宽或更窄时，位置将保持正确。

window.onresize = function() {

var cenUL = document.querySelector('.navbar-default .navbar-collapse ul.navbar-center li:last-child');
var rightUL = document.querySelector('.navbar-default .navbar-collapse ul.navbar-right li:first-child');
var newUL = document.getElementById('new');
newUL.style.left = ((cenUL.offsetLeft+cenUL.offsetWidth+rightUL.offsetLeft-newUL.offsetWidth)/2)+'px';
};

window.onresize();

.navbar-nav.navbar-center {
  float: none;
  text-align: center;
  font-size: 0;
}

.navbar-nav.navbar-center > li {
  vertical-align: top;
  display: inline-block;
  float: none;
  font-size: 1.3rem;
}
#new {
  position:absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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 tabs">
      <li>
        <a href="/">MyWebsite</a>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="">Menu</a>
      </li>
    </ul>
    
    <ul id="new" class="nav navbar-nav">
      <li><a href="">NEW!</a></li>
    </ul>

    <ul class="nav navbar-nav navbar-center">
      <li>
        <a href="">Company</a>
      </li>
      <li>
        <a href="">Products</a>
      </li>
      <li>
        <a href="">Contact</a>
      </li>
    </ul>
    
  </div>
</nav>

Answer 2

如果您只需要在xs上显示某个区域，则可以使用 bootstrap responsive classes

<强> Bootply

<强> HTML ：

<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 tabs">
      <li>
        <a href="/">MyWebsite</a>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="">Menu</a>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-right visible-xs">  // <-- HERE
      <li>
        <a href="">New Group Item 1</a>
      </li>
      <li>
        <a href="">New Group Item 2</a>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-center">
      <li>
        <a href="">Company</a>
      </li>
      <li>
        <a href="">Products</a>
      </li>
      <li>
        <a href="">Contact</a>
      </li>
    </ul>
  </div>
</nav>

CSS对齐挑战

2 个答案: