html - 如何在 div 中使用 ion-tabs

Question

我正在处理 ionic1 和 angularjs 我已经使用过选项卡，但现在我面临一个问题，我的选项卡应该只出现在特定的 div 中，所以在我的 html 页面的特定区域只有我的 ion-tabs 应该可以工作，但它没有像我预期的那样显示良好。

这是我的 .html 页面

<ion-modal-view>

    <div class="bar bar-header bar-calm">
      <button class="button icon ion-navicon"></button>
      <h1 class="title">Happy Home</h1>
      <button class="button" ng-click="closeLogout()">LogOut</button>
    </div>

    <ion-content>
        <div class = "row responsive-sm" style = "padding-top:50px">
            <div class = "col">
                <label class="item item-input item-select">
                <br>
                    <select>
                      <option>B09-301</option>
                      <option selected>G45-94</option>
                      <option>R8910</option>
                    </select>
                </label>
            </div>
        </div> 
        <div style="background-color: #DEE0E0">
            <div class = "row">
              <div class = "col-33">
                <div class="card">
                    <div class="item item-text-avatar" style="background-color: #11C1F3">
                      <i class="icon ion-ios-home item-floating-label" ></i>
                        MEMBERS
                    </div>
                </div>
              </div>
              <div class = "col-33">
                <div class="card">
                    <div class="item item-text-avatar" style="background-color: #11C1F3">
                  <i class="icon ion-model-s item-floating-label"></i>
                    Vechical
                  </div>
                </div>
              </div>
              <div class = "col-33">
              <div class="card">
                <div class="item item-text-avatar" style="background-color: #11C1F3">
                  <i class="icon ion-ios-bookmarks item-floating-label"></i>
                    Booking
                </div>
              </div>
            </div>
            </div>

            <div class ="row">
                <div class = "col col-top">
                    <div class="card">
                        <div class="item item-text-avatar" style="background-color: #11C1F3">
                          <i class="icon ion-person-stalker item-floating-label"></i>
                            Staff
                        </div>
                    </div>
                </div>
                <div class = "col col-top">
                    <div class="card">
                        <div class="item item-text-avatar" style="background-color: #11C1F3">
                          <i class="icon ion-ios-home-outline item-floating-label"></i>
                            Visitor
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class = "row">
            <ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
              <ion-tab title="MyDues">
                <ion-content>
                  <h1>happy home Dues</h1>
                </ion-content>
              </ion-tab>

              <ion-tab title="Deposite">
                <ion-content>
                  <h1>happy home Deposite</h1>
                </ion-content>
              </ion-tab>

              <ion-tab title="Advance">
                <ion-content>
                  <h1>happy home Advance</h1>
                </ion-content>
              </ion-tab>

              <ion-tab title="History">
                <ion-content>
                  <h1>happy home History</h1>
                </ion-content>
              </ion-tab>
            </ion-tabs>
        </div>
    </ion-content>

在这里你可以看到 ion-tabs 我在其中实现了标签 div 这是我应该使用 ion-tabs 的示例图像 如果有人知道如何为我的 MY DUES,ADVANCE,DEPOSIT,HISTORY 使用 ion-tabs，请帮助我。

谢谢你，

Answer 1

放在<div>里面并将此 css 添加到此 div
width: 100%; position: fixed;

为我工作