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

查看:51
本文介绍了将 Bootstrap 4 导航栏中的元素居中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

无论我尝试什么,我都无法在 Bootstrap 导航栏中居中显示内容,有什么解决方案吗?

我尝试添加一个 div,使用 margin:0 auto;margin-right:auto;margin-left:auto;,使用 center-block 类.什么都行不通,为什么这么简单我无法理解的事情很难实现,我做错了什么?

这是当前代码:

解决方案

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

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

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

这是 HTML:

</nav>

和 CSS:

.navbar-logo {宽度:90px;}

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

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?

Here's the current code :

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

解决方案

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

Ref: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

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

Here's the 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>

And CSS:

.navbar-logo {
  width: 90px;
}

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆