Question

我正在使用带有AngularJS的UI Bootstrap，我正在尝试使用col-md-2和col-md-10将垂直制表符分隔为侧边栏。

目前我有......

<uib-tabset active="activePill" vertical="true" type="pills">
    <uib-tab heading="Tab 1">Vertical content 1</uib-tab>
    <uib-tab heading="Tab 2">Vertical content 2</uib-tab>
    <uib-tab heading="Tab 3">Vertical content 3</uib-tab>
</uib-tabset>

...输出......

<div active="activePill" vertical="true" type="pills" class="ng-isolate-scope">
    <ul class="nav nav-pills nav-stacked" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
        <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope active" heading="Tab 1">
            <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 1</a>
        </li>
        <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" heading="Tab 2">
            <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 2</a>
        </li>
        <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" heading="Builds">
            <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 3</a>
        </li>
    </ul>
    <div class="tab-content">
        <!-- ngRepeat: tab in tabset.tabs -->
        <div class="tab-pane ng-scope active" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
            <span class="ng-scope">Vertical content 1</span>
        </div>
        <!-- end ngRepeat: tab in tabset.tabs -->
        <div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
            <span class="ng-scope">Vertical content 2</span>
        </div>
        <!-- end ngRepeat: tab in tabset.tabs -->
        <div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
            <span class="ng-scope">Vertical content 3</span>    
        </div>
        <!-- end ngRepeat: tab in tabset.tabs -->
    </div>
</div>

我想......

<div active="activePill" vertical="true" type="pills" class="ng-isolate-scope">
    <ul class="nav nav-pills nav-stacked col-md-2" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
    <!-- snip -->
    </ul>
    <div class="tab-content col-md-10">
    <!-- snip -->
    </div>
</div>

（添加了col-md-2和col-md-10）

Answer 1

我的团队曾经解决过这个问题，我认为你不能把它们放在一边（这与指令的结构有关），所以我们不得不删除body指令，收缩标签容器和显示右侧不同div的州观点。

<div class="col-sm-2">
  <uib-tabset active="active" vertical="true" type="pills">
    <uib-tab heading="Tab 1" select="selected(1)"></uib-tab>
    <uib-tab heading="Tab 2" select="selected(2)"></uib-tab>
    <uib-tab heading="Tab 3" select="selected(3)"></uib-tab>
  </uib-tabset>
</div>
<div class="col-sm-10">
  <div ng-show="selectedView===1">
    Show what tab 1 is selected
  </div>
  <div ng-show="selectedView===2">
    Show what tab 2 is selected
  </div>
  <div ng-show="selectedView===3">
    Show what tab 3 is selected
  </div>
</div>

Sample plunker

这当然是一个简化的案例，我们所做的是，使用ui-router来显示右边的不同状态，使其成为一个更真实的＆＃34;导航栏，我们没有必要重复丑陋的<div ng-show="selectedView===#">标记部分。

在侧栏中实现UI Bootstrap选项卡

1 个答案: