![Bass Bass](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了将 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 导航栏中的元素居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!