我知道可以把导航栏项目推向左边和右边,但如何将它们居中对齐?
我知道可以把导航栏项目推向左边和右边,但如何将它们居中对齐?
text-align:center;
不起作用,也没能实现我想到的其他事情。
我知道可以把导航栏项目推向左边和右边,但如何将它们居中对齐?
text-align:center;
不起作用,也没能实现我想到的其他事情。
你需要修改Navbar组件的一些CSS规则。因此,请在nav.navbar
中添加一个类center
和以下规则:
.navbar.center .navbar-inner {
text-align: center;
}
.navbar.center .navbar-inner .nav {
display:inline-block;
float: none;
}
.navbar.center .navbar-inner
块中添加 height: 50px;
是不太正规的,但是可以解决问题。 - Scott Odleli
元素的宽度,例如在断点触发时。有没有快速的技巧可以使宽度为100%? - user3574492navbar-inner
类更改为navbar-collapse
,但即使替换后,这种解决方案也无法正常工作。下面@Ania的答案有效。 - TracyYXChen在扩展所选答案的基础上,添加垂直对齐顶部将防止导航项下方出现空白间隙。
.navbar.center .navbar-inner {
text-align: center;
}
.navbar.center .navbar-inner .nav {
display:inline-block;
float: none;
vertical-align: top;
}
我曾经遇到过类似的问题。对我有效的解决方法是添加 'justify-content' 规则,如下所示:
CSS:
.navbar-expand-lg .navbar-collapse {
display: flex!important;
justify-content: space-around;
flex-basis: auto;
}
HTML:
<nav id="hamburger" class="navbar sticky-top navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav center">
<div><a class="nav-item nav-link active" href="#">
Start <span class="sr-only">(current)</span></a>
</div>
<div><a class="nav-item nav-link" href="#">Portfolio</a></div>
<div><a class="nav-item nav-link" href="#">Blog</a></div>
<div><a class="nav-item nav-link" href="#">O mnie</a></div>
<div><a class="nav-item nav-link" href="#">Kontakt</a></div>
</div>
</div>
</nav>
text-center
或 mx-auto
或 container-fluid
或使用 flexbox 技术,flex justify-center
您可以使用这个 hack text-center
(这不仅适用于文本)
或使用精确的 Bootstrap 类 mx-auto
例如:class="text-center"
或 class="mx-auto"
在上下文中:
<div class="btn-group text-center"> or <div class="btn-group mx-auto">
尽量不要使用内联样式(不良实践)
<div class="btn-group" style="margin:0 auto">
参考资料:
text-center
=>
https://getbootstrap.com/docs/4.0/utilities/text/
mx-auto
=> https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering
您可以使用
text-align:center;
display: inline;
/* or */
display: inline-block;
display: block;
width: /* something */;
margin: 0 auto;