如何在 div 中使用离子标签

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 这是我应该使用的示例图片>

谢谢，

Answer 1

放入 <div> 并将这个 CSS 添加到这个 div
width: 100%; position: fixed;

为我工作

Answer 2

我正在研究 ionic 3，我得到了这种方式，我将选项卡放在 ion-content 中并为我工作。

<ion-content>
<ion-card>
    <ion-row fixed padding>
        <ion-col>
            <h2 class="card-titulo"> Localidade</h2>
            <h2 class="card-titulo"> Data Início</h2>
        </ion-col>
        <ion-col>
            <h2 class="card-descricao">
                <ion-icon name="pin"></ion-icon>
                Fortaleza-CE
            </h2>
            <h2 class="card-descricao">
                <ion-icon name="calendar"></ion-icon>
                24/01/18 10:47
            </h2>
        </ion-col>
    </ion-row>

    <ion-row>
        <ion-col>
            <ion-item>
                <ion-label>Clima</ion-label>
                <ion-select [(ngModel)]="clima">
                    <ion-option>Frio</ion-option>
                    <ion-option>quente</ion-option>
                </ion-select>
            </ion-item>
        </ion-col>
        <ion-col>
            <ion-item>
                <ion-label>Equipamento</ion-label>
                <ion-select [(ngModel)]="equipamento">
                    <ion-option>Medidor</ion-option>
                    <ion-option>Equipament teste</ion-option>
                </ion-select>
            </ion-item>
        </ion-col>
    </ion-row>
</ion-card>
<ion-content>
    <tabs-obra></tabs-obra>
</ion-content>

<ion-fab bottom right>
    <button ion-fab mini (click)="abrirListaAtividade()">
        <ion-icon name="checkmark"></ion-icon>
    </button>
</ion-fab>