Bootstrap4导航栏中的文本居中问题

Question

我在 Bootstrap 中创建了一个导航栏，我想将其中的内容居中。

<nav class="navbar navbar-light bg-light">
  <div class="container"> 
    <span class="navbar-brand mb-0 h1">
      <i class="bi bi-list-check"></i>
      Nav Text
    </span> 
  </div>
</nav>

在 CSS 文件中，我尝试了几件事，但没有任何效果。例如弹性：

.navbar { 
  display: flex;
  justify-content: center;
}

似乎没有什么会影响导航栏。我不知道为什么。

Answer 1

您的“导航文本”文本位于类 .container 的 div 元素内。这个div 位于另一个nav 元素内，该元素具有navbar 类，即flexbox 容器。默认样式（您正在使用的引导程序）将内容对齐到弹性框的开头（justify-content:flex-start）。您必须使用 center 的值覆盖此默认样式，以用于 justify-content。此外，您必须使用 !important 覆盖默认样式。请看这个截图。

https://prnt.sc/1xfrtcp

以及下面的示例代码。

.navbar > .container {
justify-content:center!important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-light bg-light">
  <div class="container"> 
    <span class="navbar-brand mb-0 h1">
      <i class="bi bi-list-check"></i>
      Centered Nav Text
    </span> 
  </div>
</nav>