不同标题长度的 Bootstrap Tabs 有不同的高度答案

【问题标题】：Bootstrap Tabs with different title lengths have different heights不同标题长度的 Bootstrap Tabs 有不同的高度
【发布时间】：2021-06-27 06:13:11
【问题描述】：

我正在使用 angular-bootstrap 选项卡，

<tabset>
  <tab  ng-repeat="tab in tabs" ui-sref="{{tab.state}}">
    <tab-heading  class="navbar-header" style="cursor:pointer;">
        <div class="col-md-1" style="width: 130px;">
          {{tab.title}}
        </div>
    </tab-heading>
  </tab>
</tabset>
<div class="row-fluid"><div class="ui-view-content" ui-view></div></div>

我遇到了活动标签突出显示的白色的问题。当标题短时，当标题长

时，白色的颜色是在较小的高度上绘制的

角度版本是“1.4.1”，角度引导版本是“0.12.2”

应用 css：

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    background-color:        #ffffff;
    border: 1px solid #dddddd;
    border-bottom-color: transparent;
}

如何保证选中的tab标题的白色高度一致？

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您是否尝试过使用white-space: nowrap？它基本上强制文本不换行到下一行。非常容易使用。这是一个例子。

CSS：

.nav-tabs li, .nav-tabs a {
    white-space:nowrap;
    overflow: hidden;
}

Working Example

如果上述方法不起作用，无论出于何种原因，请尝试设置max-height。

【讨论】：

【解决方案2】：

我相信你无法在 css 中实现这一点。您必须使用 javascript 来找到具有最大高度的选项卡并将该高度应用于其余选项卡。

这篇文章中的某些内容会对脚本有所帮助 - jQuery Equal Height Divs

【讨论】：

【解决方案3】：

使用 Boostrap 5：

.nav-tabs {
  align-items: stretch;
}

.nav-tabs .nav-link {
  height: 102%;
}

height 可能因更复杂的设置而异。

【讨论】：