Ionic 1 卡片视图显示两行答案

【问题标题】：Ionic 1 card view show two rowsIonic 1 卡片视图显示两行
【发布时间】：2016-11-04 00:31:18
【问题描述】：

我需要在 Ionic 1 列表卡片视图中显示两行数据，但我无法做到这一点。我使用了两个 div 添加了两行，但它不起作用。

<div class="row row-responsive">
<div class="col">
    <div class="row row-responsive item item-divider">
        <div class="col " align="center">
            Last Name
        </div>
        <div class="col " align="center">
            First Name
        </div>
        <div class="col " align="center">
            Middle Name
        </div>
        <div class="col " align="center">
            Address 
        </div>
        <div class="col " align="center">
            Age
        </div>
        <div class="col " align="center">
            City
        </div>
        <div class="col " align="center">
            State
        </div>
    </div>

    <div class="row row-responsive item list card cardBase" ng-repeat="item in myList">
        <div class = "row row-responsive">
            <div class="col item-Overflow" align="center">
                {{item.LName}}
            </div>
            <div class="col item-Overflow" align="center">
                {{item.FName}}
            </div>
            <div class="col  item-Overflow" align="center">
                {{item.MName}}
            </div>
            <div class="col  item-Overflow" align="center">
                {{item.Address}}
            </div>
        </div>
        <div class = "row row-responsive">
            <div class="col item-Overflow" align="center">
                {{item.Age}}
            </div>
            <div class="col item-Overflow" align="center">
                {{item.City}}
            </div>
            <div class="col item-Overflow" align="center">
                {{item.State}}
            </div>
        </div>
    </div>
</div>

cardBase 类在哪里

.cardBase {
  margin: 15px 0;
  padding: 16px;
  width: 100%;
  height: 150px;
  resize: none;
}

执行此操作后，数据仍显示在一行中。请帮我以以下格式显示数据

【问题讨论】：

那么上图就是你最终想要的样子？两行？
对，我希望它最终像上图一样。

标签： ionic-framework

【解决方案1】：

就这么简单：

  <ion-content>

    <div class="card">

      <div class="row">
        <div class="col">John</div>
        <div class="col">Dev</div>
        <div class="col">Peter</div>
        <div class="col">Washington, DC</div>
      </div>

      <div class="row">
        <div class="col">23 Years</div>
        <div class="col">Tucson</div>
        <div class="col">USA</div>
      </div>

    </div>

  </ion-content>

查看ionic grids了解更多信息。

【讨论】：