css - Bootstrap 中心导航栏项目

Question

我知道我可以将导航栏项目向左和向右推送，但我如何将它们居中？

text-align:center;

不起作用，我想到的其他任何事情都不起作用。

Answer 1

您需要修改 Navbar 组件的一些 CSS 规则。所以添加一个类center和nav.navbar以下规则：

.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
}

工作演示（引导程序 3.3.7）

Answer 2

要扩展所选答案，添加垂直对齐顶部将防止空间出现在导航项下方。

.navbar.center .navbar-inner {
    text-align: center;
}

.navbar.center .navbar-inner .nav {
    display:inline-block;
    float: none;
    vertical-align: top;
}

演示

Answer 3

使用text-centerormx-auto或container-fluidor 使用 flexbox 技术，flex justify-center

1. 您可以使用此 hack text-center（这不仅适用于文本）

2. 或者使用确切的 boostrap 类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/#horizo​​ntal-centering

Answer 4

我有类似的问题。对我有用的是像这样添加规则'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>

Answer 5

您可以使用

text-align:center;

到包装元素以使其子元素居中，但前提是子元素具有

display: inline;
/* or */
display: inline-block;

如果您知道要居中的元素的宽度，另一种选择是

display: block;
width: /* something */;
margin: 0 auto;