时间戳

首页 > 解决方案 >

html -
    当 justify-content-center 应用于 Bootstrap 时，无法居中
      什么时候
        在一排之内

问题描述

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

  <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>

展示 ：

在此处输入图像描述

但是，当我将 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>

在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

试试这个，

第一种方法

请添加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到行类以对齐<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>

推荐阅读