Question

我正在使用引导程序设计的网页中包含以下代码：

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top justify-content-center">
  <a class="navbar-brand" href="#">Banana APInf</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Dashboard</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">APIs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Organizations</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Add APIs</a>
      </li>
    </ul>
  </div>
</nav>

我参考的是w3学校的。我试图在单独的style.css文件中添加以下自定义的CSS

    #collapsibleNavbar {
  text-align: center !important;
}

但是由于某些原因，徽标和菜单在较大的屏幕中显示为左对齐。在平板电脑大小的屏幕或较小的屏幕中，汉堡包图标和徽标会居中对齐。汉堡菜单中的内容也在小屏幕中居中对齐。我试图用居中对齐的文本覆盖折叠和 navbar-折叠类，但这没有帮助。

有人可以在这里帮助我吗？谢谢。

Bootstrap 4：中心对齐导航栏菜单时出现问题

0 个答案: