如何强制离子幻灯片尊重列宽答案

【问题标题】：How to force ionic slides to respect column width如何强制离子幻灯片尊重列宽
【发布时间】：2018-01-28 09:38:22
【问题描述】：

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

问题是离子滑块不尊重列宽，我不确定如何纠正这个问题（我对 flexbox css 不太熟悉）。上次我使用 Ionic (v1) 时，ionic-slide-box 元素并没有导致我出现这个问题。

这是我正在使用的 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>

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

【问题讨论】：

标签： css angularjs ionic-framework

【解决方案1】：

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

即应该使用“col-6”而不是“col-50”来显示 1/2 - 1/2 布局分布。

【讨论】：