Question

我正在尝试使用Bootstrap创建一个导航栏，左侧是“navbar-brand”，中间是导航栏项目，右侧是2个项目。首先，我尝试从头开始制作，但我无法实现足够的响应。

然后，我在Bootply上找到了这种方法，这与我想要的所有响应和导航栏崩溃非常接近。但是，我想换掉navbar-brand和left items;品牌在左边，左边的物品在中间;正确的物品保持其位置。

[ Navbar-Brand            Home | About | Contact | Address            Right, Right]

实现它的最佳，最方便的方法是什么？

以下是代码段：

.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-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>    
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <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>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

Answer 1

您可以在.navbar-left上使用 CSS定位，并使用CSS transform将其设置在中心（将其限制在平板电脑和桌面设备上以免影响移动布局）。

查看下面的代码段（使用全屏）：

.navbar-brand {
  position: absolute;
  width: auto;
  left: 15px;
  text-align: center;
  margin:0 auto;
}

.navbar-toggle {
  z-index:3;
}

/* On Tabs & Desktops */
@media screen and (min-width: 768px) {
  .navbar-left {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-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>    
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <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>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

希望这有帮助！

Answer 2

你也可以试试这个：

@media screen and (min-width: 768px) {
    .navbar-collapse {
        position: relative;
    }
    .navbar-left {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 0;
        left: 0;
    }
    .navbar-left > li > a {
        display: inline-block;
    }
    .navbar-left > li {
        display: inline;
        float: none;
    }
}

Codepen：https://codepen.io/anon/pen/GNYNey

Bootstrap Navbar，中间有项目

2 个答案: