将 Bootstrap 4 导航选项卡设置为相同的高度答案

【问题标题】：set Bootstrap 4 nav-tabs to the same height将 Bootstrap 4 导航选项卡设置为相同的高度
【发布时间】：2020-02-13 19:44:47
【问题描述】：

当文本换行时，如何确保 Bootstrap 4 导航选项卡都填充相同的高度？

.my-card-header-tabs .nav-link{
    color: #6A4E6A;
    background-color: #DBEAE7;
}

.my-card-header-tabs .nav-link.active{
  background-color: #6A4E6A;
  color: #fff;
  border-bottom-color: #6A4E6A;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
<div class="card mb-5">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs my-card-header-tabs nav-justified">
      <li class="nav-item">
        <a class="nav-link" href="">This is a test for link 1 - long text</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="">Short link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">This is a test for link 3 - long text</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">This is a test for link 4 - long text</a>
      </li>
    </ul>
   </div>
</div>
</container>

在下图中，导航选项卡需要填充整个高度，即包括以橙色突出显示的空间。

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

首先将</container>替换为</div>

要拉伸你可以制作的链接

.nav-item {
  display: flex;
}

.nav-link {
  flex-grow: 1;
}

要使链接内容中心，您可以使用 <span> 和样式包装内容

.nav-link {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

一切尽在sn-p中。

.my-card-header-tabs .nav-link {
  color: #6A4E6A;
  background-color: #DBEAE7;
  
  /* added */
  flex-grow: 1;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.my-card-header-tabs .nav-link.active {
  background-color: #6A4E6A;
  color: #fff;
  border-bottom-color: #6A4E6A;
}

.my-card-header-tabs .nav-item {
  display: flex;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
  <div class="card mb-5">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs my-card-header-tabs nav-justified">
        <li class="nav-item">
          <a class="nav-link" href=""><span>This is a test for link 1 - long text</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href=""><span>Short link 2</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=""><span>This is a test for link 3 - long text</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=""><span>This is a test for link 4 - long text</span></a>
        </li>
      </ul>
    </div>
  </div>
</div>

【讨论】：