当<ul>在一行中时，当将justify-content-center应用于<ul>时，Bootstrap中的<ul>不能居中

编程问答 2022-08-12

问题描述

这是我的代码（只有正文）

  <body>
    
    <div class="container-fluid">

      <div class="row">

          <ul class="nav justify-content-center nav-tabs"> 
            <li class="nav-item"> 
              <a class="nav-link" href="/home.PHP">Home</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="/login.PHP">Log In</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="/logout.PHP">Log Out</a> 
            </li> 
          </ul>
     

      </div>
    </div>


  </body>

显示：

enter image description here

但是，当我将ul放在一列中时，我可以居中ul。为什么我上面的代码无法将ul居中？

编辑：

如果我从代码中删除行，我可以在ul上使用justify-content-center。但是我的问题仍然存在，因为当行存在时我无法解释行为

<body>
    
    <div class="container-fluid">

  
 
          <ul class="nav justify-content-center nav-tabs"> 
            <li class="nav-item"> 
              <a class="nav-link" href="/home.PHP">Home</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="/login.PHP">Log In</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="/logout.PHP">Log Out</a> 
            </li> 
          </ul>
     

    </div>

</body>

enter image description here

解决方法

试试看，

第一种方法

请将flex-basis:100%;添加到 ，以对齐<ul>中心。

ul{
  flex-basis:100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
    <div class="container-fluid">
      <div class="row">

        <ul class="nav nav-tabs justify-content-center"> 
          <li class="nav-item"> 
            <a class="nav-link" href="/home.php">Home</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="/login.php">Log In</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="/logout.php">Log Out</a> 
          </li> 
        </ul>

      </div>
    </div>
  </body>

第二种方法

请添加justify-content-center到 row 类中，以对齐<ul>的中心，而不是添加到<ul>标记中。 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
    <div class="container-fluid">
      <div class="row justify-content-center">

        <ul class="nav nav-tabs"> 
          <li class="nav-item"> 
            <a class="nav-link" href="/home.php">Home</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="/login.php">Log In</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="/logout.php">Log Out</a> 
          </li> 
        </ul>

      </div>
    </div>
  </body>

,

ul本身未居中，因此使用.justify-content-center会将其子li元素仅居中在ul内，而其本身仍位于左侧。将.justify-content-center添加到ul的父元素（行div）中，它应该可以工作。

,

尝试一下

<div class="row">

    <ul class="nav justify-content-center nav-tabs" style="display: flex; justify-content: center;">
        <li class="nav-item">
            <a class="nav-link" href="/home.php">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/login.php">Log In</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/logout.php">Log Out</a>
        </li>
    </ul>

</div>
bootstrap-4html