UI引导增添＆LT; D​​IV＆GT;围绕＆LT; UIB-标签集＆GT;指令，打破CSS [英] UI Bootstrap adds <div> around <uib-tabset> directive, breaking CSS

问题描述

在使用＆LT; UIB-标签集＆GT; 包含在用户界面引导，该指令模板周围产生的无序列表与空＆LT; D​​IV＆GT; 元素。

When using <uib-tabset> included in UI Bootstrap, the directive template surrounds the resulting unordered list with an empty <div> element.

<div>
  <ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
  <div class="tab-content">
    <div class="tab-pane" 
         ng-repeat="tab in tabs" 
         ng-class="{active: tab.active}"
         uib-tab-content-transclude="tab">
    </div>
  </div>
</div>

这是导致我的CSS打破，因为CSS选择器是如下：

This is causing my CSS to break since the CSS selectors are as follows.

.tabbable-custom > .nav-tabs > li.active {
    ...
}

当我使用＆LT; UIB-标签集＆GT; ，这个规则是不是回升，因为层次是现在

When I use <uib-tabset>, this rule isn't picked up because the hierarchy is now

.tabbable-custom > div > .nav-tabs > li.active {
    ...
}

我能否避免了不得不重写我的整个CSS库考虑到这一点增加＆LT; D​​IV＆GT;

更新：

下面是从我的模板中的HTML：

Here is the html from my template:

<div class="portlet-body">
    <div class="tabbable-custom">
        <uib-tabset>
            <uib-tab ng-repeat="tabData in tabDataArray" heading="{{ tabData.heading }}">

和这里是生成的DOM：

and here is the resulting DOM:

<div class="portlet-body">
    <div class="tabbable-custom">
        <div class="ng-isolate-scope">
            <ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">

我可以删除类=NG-分离范围的禁用debuginfo软，但它不与CSS的区别。

I can remove the class="ng-isolate-scope" by disabling debugInfo, but it doesn't make a difference with the CSS.

更新2：
另一种解决办法是删除＆LT; D​​IV CLASS =tabbable定制＆GT; 从我的HTML模板，那类添加到空的 ＆LT; D​​IV＆GT; 的＆LT; UIB-标签集＆GT; 指令的地方。这是UI引导一种可能性？

Update 2: Another solution could be to remove the <div class="tabbable-custom"> from my template HTML, and add that class to the empty <div> that the <uib-tabset> directive places. Is this a possibility with UI Bootstrap?

推荐答案

管理来完成什么，我需要通过重写UI引导模板在这一问题解释说：<一href=\"http://stackoverflow.com/questions/17660947/can-you-override-specific-templates-in-angularui-bootstrap\">Can您覆盖特定模板AngularUI引导？

Managed to accomplish what I needed by overwriting the UI Bootstrap template as explained in this question: Can you override specific templates in AngularUI Bootstrap?

这篇关于UI引导增添＆LT; D​​IV＆GT;围绕＆LT; UIB-标签集＆GT;指令，打破CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！