我试图将我的导航栏链接居中,但是当我这样做时,我的品牌标志将它推到右边,所以它没有居中。这是我的 html ...
<nav class="navbar navbar-toggleable-md navbar-light main-nav">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">Brand Name</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto clearfix">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
如何阻止品牌 Logo 影响我的导航栏链接的位置。
最佳答案
发生这种情况是因为相邻的 flexbox 项目相对于彼此的位置。
一个选择是使用 flexbox utils 和右侧的全宽占位符元素。 navbar-brand 也使用 w-100
util 类设置为全角。
<nav class="navbar navbar-toggleable navbar-inverse bg-primary justify-content-center">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCenter">
<span class="navbar-toggler-icon"></span>
</button>
<a href class="navbar-brand d-flex w-100 mr-0">Brand is Wider Name</a>
<div class="navbar-collapse collapse" id="navbarCenter">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Center</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="d-flex w-100"> </div>
</nav>
http://www.codeply.com/go/N7veP8FMqg
另一种选择是绝对定位 .navbar-nav
..
@media (min-width: 567px) {
.abs-center-x {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
}
}
https://www.codeply.com/go/RCBftzZCD8
相关:
Bootstrap 4 menu toggle button to left and right, with brand in center
How the LOGO could be CENTERED and Not collapsing and toggle icon should appear on left in the Navbar?
关于html - 中心导航栏链接没有品牌在 Bootstrap 4 中将其推到右侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42539701/