具有不同标题长度的 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版本为"1.4.1"，angular bootstrap版本为"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;
}

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

- user2879704

Answer 1

你尝试过使用white-space: nowrap吗？它可以强制文本不换行到下一行。非常容易使用。这里是一个例子。

CSS：

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

工作示例

如果以上方法因任何原因无法使用，请尝试设置max-height。

- Fizzix

Answer 2

使用Bootstrap 5：

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

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

height在更复杂的设置中可能会有所变化。

- madbob

Answer 3

我相信你无法在CSS中实现这一点。你需要使用JavaScript来查找具有最大高度的选项卡，并将该高度应用于其他选项卡。

此帖子中的某些内容将有助于脚本 - jQuery等高Divs

- Chetan