Question

通过构建应用程序，我一直在教自己新版本的AngularJS和Ionic。目前我有一个使用离子行和列构建的页面。我在页面上有一个50/50列，用于呈现JSON数据。左列是文本表，右列是离子滑块中的图像。

问题是离子滑块不尊重色谱柱宽度，我不知道如何纠正这个问题（我不熟悉flexbox css）。上次我使用Ionic（v1）时，离子滑动盒元素并没有给我带来这个问题。

以下是我使用的HTML模板代码：

<ion-header>

  <ion-navbar>
    <ion-title>{{macroDetails.title}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-card>
    <ion-card-header><h1>{{macroDetails.title}}</h1></ion-card-header>
    <ion-card-content>
      <ion-row>
        <ion-col col-50>

          <table>
            <tr>
              <td width="20%"><strong>Sensitivity Rating</strong></td>
              <td width="80%">{{macroDetails.sensitivity}}</td>
            </tr>
            <tr>
              <td><strong>Phylum</strong></td>
              <td>{{macroDetails.phylum}}</td>
            </tr>
            <tr>
              <td><strong>Class</strong></td>
              <td>{{macroDetails.class}}</td>
            </tr>
            <tr>
              <td><strong>Order</strong></td>
              <td>{{macroDetails.order}}</td>
            </tr>
            <tr>
              <td><strong>Family</strong></td>
              <td>{{macroDetails.family}}</td>
            </tr>
            <tr>
              <td><strong>Genera</strong></td>
              <td>{{macroDetails.genera}}</td>
            </tr>
            <tr>
              <td><strong>Size</strong></td>
              <td>{{macroDetails.size}}</td>
            </tr>
            <tr>
              <td><strong>Habitat</strong></td>
              <td>{{macroDetails.habitat}}</td>
            </tr>
            <tr>
              <td><strong>Diet</strong></td>
              <td [innerHTML]="macroDetails.diet"></td>
            </tr>
            <tr>
              <td><strong>Features</strong></td>
              <td>{{macroDetails.features}}</td>
            </tr>
          </table>
        </ion-col>

        <ion-col col-50>
          <small class="slideinfo">Swipe to change the images</small>
          <ion-slides pager="true">
            <ion-slide *ngFor="let images of macroDetails.featured_image">
              <img src="../assets/imgs/specimens/{{images}}.jpg" />
            </ion-slide>
          </ion-slides>
        </ion-col>

      </ion-row>
    </ion-card-content>

我已经查看了离子论坛和SO的解决方案，但还没有看到。只是希望有人之前遇到过这个问题并且可以推荐一个解决方案。

Answer 1

啊，这是我自己的愚蠢错！没有正确阅读更新的离子文档。现在注意到离子网格列现在基于BS网格系统：

即。应该使用＆＃34; col-6＆＃34;而不是＆＃34; col-50＆＃34;显示1/2 - 1/2布局扩展。

如何强制离子滑块尊重柱宽

1 个答案: