3

我使用角引导翼片作为,具有不同标题的长度引导翼片具有不同的高度

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

我面临与高亮白色为有源标签的问题。白色绘制在更小的高度时的标签的标题是短和更长的高度时的标签的标题是长

enter image description here enter image description here

角版本是“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; 
} 

如何确保所选择的标签标题的白颜色是统一的高度吗?

回答

1

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

CSS:

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

Working Example

如果上述方法无效,无论出于何种原因,可以尝试设置max-height

+1

我的标签串看起来比以前更好的..谢谢 –

0

我相信你不能在CSS中实现这一点。您将不得不使用JavaScript来查找具有最大高度的选项卡,并将该​​高度应用于其余的选项。

这个职位的东西,将有助于在脚本 - jQuery Equal Height Divs