在Bootstrap 4导航栏中将元素居中 [英] Center an element in Bootstrap 4 Navbar

问题描述

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

No matter what I try, I can't center something in Bootstrap navbar, any solutions for it?

我尝试使用center-block类使用margin:0 auto;或margin-right:auto; margin-left:auto;添加div.什么都行不通，为什么要实现如此简单但我无法理解的东西如此困难，我做错了什么?

I've tried adding a div, using margin:0 auto; or margin-right:auto; margin-left:auto;, used center-block class. Nothing works, why is so hard to achieve something so simple I can't understand, what I'm doing wrong?

这是当前代码:

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

推荐答案

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

In Bootstrap 4, there is a new utility known as .mx-auto. You just need to specify the width of the centered element.

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

与巴斯伯森的答案不同，后者是两端元素的相对中心，下面的示例是绝对居中.

Diffferent from Bass Jobsen's answer, which is a relative center to the elements on both ends, the following example is absolute centered.

这是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;
}

这篇关于在Bootstrap 4导航栏中将元素居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！