Bootstrap4 中Navbar导航栏文本无法居中的问题如何解决

问题原因 #

你的自定义CSS未生效核心是三点：

1. Bootstrap 自带的.navbar默认已经是flex布局，你额外声明display: flex不会产生新效果
2. 给.navbar设置justify-content: center只会控制它的直接子元素（也就是你代码里的.container）的对齐，而.container默认宽度占满可用空间，内部内容依然靠左，所以看不到变化
3. 如果写了正确的样式还是不生效，确认你的自定义CSS文件的引入顺序在Bootstrap CSS文件之后，只有后加载的样式才能覆盖Bootstrap的默认规则。

解决方案 #

方案1：使用Bootstrap内置类（推荐，无需额外写CSS） #

直接给.container添加Bootstrap自带的justify-content-center工具类即可，修改后的代码如下：

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

Bootstrap的.container在导航栏内默认就是flex布局，添加justify-content-center后会直接让内部所有内容水平居中。

方案2：使用自定义CSS #

如果你需要通过CSS控制，选择器要选中导航栏内的.container，代码如下：

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

内容的提问来源于stack exchange，提问作者adler