我需要在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;
}
這樣做還是數據後顯示在一個單行。請幫我顯示數據格式如下
所以上面的圖片是你最終想要它的方式嗎?在2行? –
對,我希望它終於像上面的圖像。 – Rishi