具有不同标题长度的Bootstrap选项卡具有不同的高度

Question

我正在使用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>

我遇到活动标签突出显示白色的问题。当标签标题较短时，白色会在较小的高度上绘制，而当标签标题较长时，白色会在较长的高度上绘制

Angular版本是＆＃34; 1.4.1＆＃34;和角度引导版本是＆＃34; 0.12.2＆＃34;

App 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;
}

如何确保所选标签标题的白色高度均匀？

Answer 1

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

<强> CSS：

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

<强> Working Example

如果上述操作无效，请尝试设置max-height。

Answer 2

我相信你无法在CSS中实现这一目标。您必须使用javascript查找具有最大高度的选项卡，并将该​​高度应用于其余部分。

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

Answer 3

使用 Boostrap 5：

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

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

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