2016-07-01 84 views
0

我需要在Ionic 1列表卡片視圖中顯示兩行數據,但我無法實現此目的。我用兩個div來添加兩行,但它不工作。Ionic 1卡片視圖顯示兩行

<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; 
} 

這樣做還是數據後顯示在一個單行。請幫我顯示數據格式如下

enter image description here

+0

所以上面的圖片是你最終想要它的方式嗎?在2行? –

+0

對,我希望它終於像上面的圖像。 – Rishi

回答

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更多。

+0

看看這個...... –

+1

謝謝Prashant ...它的工作:) – Rishi

+0

很高興幫助! :) –