将一个元素置于Bootstrap 4 Navbar中

Question

无论我尝试什么,我都无法在Bootstrap导航栏中找到一些东西,任何解决方案呢？

我已经尝试添加div,使用margin:0 auto;或margin-right:auto; margin-left:auto;使用center-block类.没有什么可行的,为什么很难实现这么简单我无法理解的东西,我做错了什么？

这是当前的代码:

<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
    <ul class="nav navbar-nav pull-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav text-center">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>

Answer 1

针对Bootstrap 4.1+进行了更新

Bootstrap 4导航栏现在使用flexbox,因此Website Name可以使用mx-auto.左侧和右侧菜单不需要浮动.

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Rates</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

导航中心与mx-auto演示

如果Navbar只有一个navbar-nav,那么justify-content-center也可以用来居中.

编辑

在上面的解决方案中,相对于左侧和右侧Website Name居中,因此如果这些相邻导航的宽度不同,则不再居中.navbar-navWebsite Name

要解决此问题,可以使用其中一个绝对居中的flexbox解决方法......

选项1 - 使用位置:绝对;

由于可以在flexbox中使用绝对定位,因此一种选择是在要居中的项目上使用它.

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Navbar中心具有绝对位置演示

选项2 - 使用flexbox嵌套

最后,另一个选择是使居中的项目也display:flexbox正确对齐.在这种情况下,每个导航栏组件必须具有d-flex

从Bootstrap 4 Beta开始,Navbar就是现在flex-grow:1.Bootstrap 4.1.0包含一个新display:flex类,使每个导航部分填充宽度:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
    <div class="container justify-content-center">
        <ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">More</a>
            </li>
        </ul>
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Center</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Navbar中心,带有flexbox嵌套演示

在Bootstrap 4.1.0之前,你可以像这样添加flex-fill类......

.flex-fill {
   flex:1
}

自4.1开始flex-fill包含在Bootstrap中.

Bootstrap 4 Navbar中心演示

相关:
如何在Bootstrap中居导航项？
带有左,中或右对齐项目的Bootstrap NavBar

Answer 2

在Bootstrap 4中,有一个新的实用程序称为.mx-auto.您只需指定居中元素的宽度即可.

参考:http://v4-alpha.getbootstrap.com/utilities/spacing/#horizo​​ntal-centering

与Bass Jobsen的答案不同,后者是两端元素的相对中心,下面的例子是绝对居中的.

这是HTML:

<nav class="navbar bg-faded">
  <div class="container">
    <ul class="nav navbar-nav pull-sm-left">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-logo mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Brand</a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 6</a>
      </li>
    </ul>
  </div>
</nav>

和CSS:

.navbar-logo {
  width: 90px;
}