Twitter bootstrap 在另一个离子内容中包含一个离子窗格会导致不显示内部的离子窗格

我正在尝试将一个

离子窗格

放入另一个

离子窗格

中，该窗格具有页眉和页脚。问题是内窗格被困在

div

元素中，没有高度，因此根本没有显示。这是我的标签：

<ion-pane>
    <ion-header-bar class="bar-positive">
        <h1 class="title">Demo</h1>
    </ion-header-bar>

    <ion-content>
<!-- invisible tags { -->
        <ion-pane>
        <ion-header-bar>
            <h1 class="title">Log on form</h1>
        </ion-header-bar>
        <ion-content>
            <form ng-submit="doLogin()">
            <div class="list">
                <label class="item item-input">
                <span class="input-label">Username:</span>
                <input type="text" ng-model="loginData.username">
                </label>
                <label class="item item-input">
                <span class="input-label">Password:</span>
                <input type="password" ng-model="loginData.password">
                </label>
                <label class="item">
                <button class="button button-block button-positive" type="submit">Log on</button>
                </label>
            </div>
            </form>
        </ion-content>
        </ion-pane>
<!-- invisible tags } -->
    </ion-content>

    <ion-footer-bar class="bar-stable">
        <a class="button button-clear" ui-sref="terms">Terms</a>
        <a class="button button-clear" ui-sref="about">About</a>
        <a class="button button-clear" ui-sref="contact">Contact</a>
    </ion-footer-bar>
</ion-pane>

演示
登录表单
用户名：
密码：
登录
条款
关于
接触

我正在用离子1.2.13进行测试