Question

我想使Bootstrap中的导航链接居中对齐，但是由于我没有使用列表结构，因此所有解决方案都无法使用。

    <section id="menuNavigation">
        <div class="container-fluid">
            <nav class="navbar navbar-expand-lg">

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

                <div class="collapse navbar-collapse" id="navbarHeader">
                    <ul class="navbar-nav">
                        <a href="index.php" class="nav-item nav-link">Uniongs</a>
                        <a href="sobre.php" class="nav-item nav-link">Sobre</a>
                        <a href="seja-um-doador.php" class="nav-item nav-link">Seja Assinante</a>
                        <a href="blog.php" class="nav-item nav-link">Blog</a>
                        <a href="seja-assinante.php" class="nav-item nav-link">Publicidade</a>
                    </ul>
                </div>

            </nav>
        </div>
    </section>

我尝试了所有操作：text-center，text-align：center，justify-content-center，但没有任何效果。

Answer 1

您的HTML无效。 ul只能将li作为孩子。尝试改用div。

然后使用BS4中可用的flexbox帮助器类。

<div class="navbar-nav d-flex justify-content-center">

然后，我们只需要添加flex:1来使菜单全宽。列表项不会居中的原因是因为菜单的宽度不全，菜单本身未对齐。

以整页模式查看。

.navbar-nav {
  flex: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="menuNavigation">
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg">

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

      <div class="collapse navbar-collapse " id="navbarHeader">
        <div class="navbar-nav d-flex justify-content-center">
          <a href="index.php" class="nav-item nav-link">Uniongs</a>
          <a href="sobre.php" class="nav-item nav-link">Sobre</a>
          <a href="seja-um-doador.php" class="nav-item nav-link">Seja Assinante</a>
          <a href="blog.php" class="nav-item nav-link">Blog</a>
          <a href="seja-assinante.php" class="nav-item nav-link">Publicidade</a>
        </div>
      </div>

    </nav>
  </div>
</section>

Answer 2

仅添加了CSS代码。希望对您有帮助。

.navbar-nav {
  text-align: center;
  width: 100%;
  float: left;
  display: inline-block;
}

.nav-link {
  float: none;
  display: inline-block;
  padding:0 10px;
}

<section id="menuNavigation">
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg">

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

      <div class="collapse navbar-collapse" id="navbarHeader">
        <ul class="navbar-nav">
          <a href="index.php" class="nav-item nav-link">Uniongs</a>
          <a href="sobre.php" class="nav-item nav-link">Sobre</a>
          <a href="seja-um-doador.php" class="nav-item nav-link">Seja Assinante</a>
          <a href="blog.php" class="nav-item nav-link">Blog</a>
          <a href="seja-assinante.php" class="nav-item nav-link">Publicidade</a>
        </ul>
      </div>

    </nav>
  </div>
</section>

对齐导航引导中心

2 个答案: