Bootstrap标签页等宽适配及文本换行后高度对齐问题

核心解决方案 #

放弃手动固定宽度的方式，通过CSS Grid和Flex布局实现自适应：

1. 实现等宽且适配最长文本
   给.nav-tabs添加Grid布局配置，让每列宽度以最长标签的内容为基准，同时自动均分宽度保证等宽：

.nav-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
}

• max-content确保每列宽度不会小于最长标签的文本长度，彻底避免文本换行
• 1fr让所有列均分可用空间，保持标签整体等宽

2. 填充标签高度，消除底部空白
   修改.nav-link的布局，让它填满父容器高度，同时保持文本居中：

.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 移除原来的固定宽度设置 */
}

• flex布局让链接自动填充.nav-item的高度，解决底部空白问题
• align-items和justify-content保证文本在标签内垂直水平居中

完整示例代码 #

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

  <title>Tabs</title>
  <style>
    .nav-tabs {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
    }
    .nav-link {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  </style>
</head>

<body>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Some Very Very Long Text</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Some Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Another Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>

</html>

效果说明 #

• 所有标签自动适配最长文本的宽度，不会出现文本换行
• 所有标签高度自动对齐，底部无空白
• 新增更长文本的标签时，布局会自动调整，无需手动修改宽度

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