在Bootstrap 4导航栏中将元素居中

小编典典

在Bootstrap 4导航栏中将元素居中

css

无论我尝试什么，我都无法在Bootstrap导航栏中放置任何内容，对此有什么解决方案？

我试过使用margin:0 auto;或margin-right:auto; margin-left:auto;使用的center- block类添加div 。什么都行不通，为什么要实现如此简单，我无法理解的东西这么难，我在做什么错呢？

这是当前代码：

<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>

阅读 564

2020-05-16

共1个答案

小编典典

在Bootstrap 4中，有一个名为的新实用程序.mx-auto。您只需要指定居中元素的宽度。

与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;
}

2020-05-16