问题描述
无论我如何尝试,我都无法在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/#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.
这是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导航栏中将元素居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!