![Bass]( "Bass")
本文介绍了将 Bootstrap 4 导航栏中的元素居中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
无论我尝试什么，我都无法在 Bootstrap 导航栏中居中显示内容，有什么解决方案吗?
我尝试添加一个 div，使用 margin:0 auto; 或 margin-right:auto;margin-left:auto;，使用 center-block 类.什么都行不通，为什么这么简单我无法理解的事情很难实现，我做错了什么?
这是当前代码:
<div class="容器"><ul class="nav navbar-nav pull-left"><li class="nav-item active"><a class="nav-link" href="#">首页</a><li class="nav-item"><a class="nav-link" href="#">下载</a><li class="nav-item"><a class="nav-link" href="#">注册</a><ul class="nav navbar-nav text-center"><li class="nav-item"><a class="nav-link" href="#">网站名称</a></li><ul class="nav navbar-nav pull-right"><li class="nav-item"><a class="nav-link" href="#">Rates</a><li class="nav-item"><a class="nav-link" href="#">帮助</a><li class="nav-item"><a class="nav-link" href="#">联系方式</a>
解决方案
在 Bootstrap 4 中，有一个名为 .mx-auto 的新实用程序.您只需要指定居中元素的宽度.
参考:http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
与 Bass Jobsen 的答案不同，后者是两端元素的相对中心，以下示例是绝对中心.
这是 HTML:
<div class="容器"><ul class="nav navbar-nav pull-sm-left"><li class="nav-item"><a class="nav-link" href="#">链接 1</a><li class="nav-item"><a class="nav-link" href="#">链接 2</a><li class="nav-item"><a class="nav-link" href="#">链接 3</a><li class="nav-item"><a class="nav-link" href="#">链接 4</a><ul class="nav navbar-nav navbar-logo mx-auto"><li class="nav-item"><a class="nav-link" href="#">品牌</a><ul class="nav navbar-nav pull-sm-right"><li class="nav-item"><a class="nav-link" href="#">链接 5</a><li class="nav-item"><a class="nav-link" href="#">链接 6</a>
</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 导航栏中的元素居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！