不同标题长度的 Bootstrap Tabs 具有不同的高度

Question

I am using angular-bootstrap tabs as,

<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>

I am facing problems with the highlighted white color for active tab. The white color is drawn over smaller height when the tab title is short and longer heights when the tab title is long

Angular version is "1.4.1" and angular bootstrap version is "0.12.2"

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

How to ensure that the selected tab heading's white color is of uniform height?

Answer 1

Have you tried using white-space: nowrap ? It basically forces the text to not wrap to the next line. Very easy to use. Here is an example.

CSS:

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

Working Example

If the above doesn't work, for whatever reason, try setting a max-height .

Answer 2

I believe you cannot achieve this in css. You will have to use javascript to find the tab with max height and apply that height to the rest of them.

Something from this post would help in the script - jQuery Equal Height Divs

Answer 3

With Boostrap 5:

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

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

The height may vary on more complex setups.