Question

基于example here我试图在面板主体中放置一个完整尺寸的标签，就像效果非常好的示例一样，但在我的情况下，我仍然没有完整的高度标签内容。有人能解释一下这是什么问题吗？

代码上方：example.js文件在示例中是相同的

<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="example.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
      html, body, .tabset, .tab-content, .tab-pane, .tabbable {
       height:100%;
      }

     .panel-body .tab-content {
        height:100%;
        min-height:100%;
        background:green;
      }
      .panel-body {
      height:100%;
      min-height:100%;
      }

      .panel{
      height:100%;
      min-height:100%;

      }
    </style>
  </head>
  <body>
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title"> Example

    </h4>
  </div>
  <div class="panel-wrapper collapse in">
    <div class="panel-body" ng-controller="TabsDemoCtrl"> 
  <tabset>
    <tab heading="Static title">
        Static content
    </tab>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
        {{tab.content}}
    </tab>
  </tabset>
  </div>
  </div>
  </div>
  </body>
</html>

Answer 1

您需要为尚未指定panel-wrapper组件的中间元素height添加高度，height: inherit将从父元素.panel继承高度这将是100%，然后panel-body类可以使用获取height。

.panel-wrapper{
    height: inherit;
}

Working Plunkr

Answer 2

你忘了添加面板

只需将div中的tabset包含在面板类中，就像这样

<div class="panel panel-default">
<tabset>
    <tab heading="Static title">
        Static content
    </tab>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
        {{tab.content}}
    </tab>
  </tabset>
</div>

高度将按您的要求

标签在引导程序中的全高

2 个答案: