Question

我似乎无法弄清楚如何使导航项目居中。我可以把它们放在左边或右边但不是中心。有简单的工作吗？

  <!-- Navigation -->
  <div class="navbar navbar-default navbar-static-top">
    <div class="container">
      <!-- Mobile navigation button --> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>   
      </button>
      <!-- Navigation items -->
      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav">
          <li><a href="#">OUR PRODUCTS</a></li>
          <li class="active"><a href="#">ABOUT</a></li>
          <li><a href="#">OUR TEAM</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>  
    </div>
  </div>

我尝试了一些事情，但他们有点邋and并且导致了移动版本的一些问题。我正在寻找一些更合适的东西。

Answer 1

1）使用<ul class="nav nav-justified" ...作为菜单容器。

2）看看这个codepen来源：

.navbar-nav {
    width: 100%;
    text-align: center;
}

.navbar-nav > li
{
    float: none;
    display: inline-block;
}

3）阅读答案right there

有三种不同的方法可以做你想要的事情，选择一种。

您可以轻松找到答案，请在下次尝试单独执行此操作，兄弟。

Answer 2

你也可以通过flexbox使用一些自定义CSS。

.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    float: none; // overwrites Bootstrap's float value
}

Answer 3

试试这个

.navbar-nav {
    width: 100%;
    text-align: center;
}

.navbar-nav > li
{
    float: none;
    display: inline-block;
}
.navbar-nav > li a{
    text-decoration:none;
    padding-left:15px;
}

如何集中Bootstrap导航项

3 个答案: