HTML 使用 Ionic 3，如何分隔行

Question

我有这个 HTML 需要分隔每一行，我该怎么做？

这是我的：

<ion-grid class="grid-16 box">
    <ion-row *ngFor="let device of connectedDevices" align-items-center>
        <button ion-item ion-col col-12 (click)="selectDevice(device)">
            <ion-col col-auto><img [src]="getIcon(device.physAddress)" height="28"></ion-col>
            <ion-col>{{ getName(device.physAddress, device.hostName) }}</ion-col>
            <ion-col col-auto>
                <ion-row>
                    <ion-col class="grid connection">
                        <img *ngIf="device.interfaceType == 'Wifi'" src="assets/icon/ico_device_wifi.svg" width="21">
                        <img *ngIf="device.interfaceType == 'Ethernet'" src="assets/icon/ico_device_lan.svg" width="21">
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col class="grid success">{{ liveboxWifiDevicesCms.literalConnected }}</ion-col>
                </ion-row>
            </ion-col>
        </button>
    </ion-row>
</ion-grid>

这是我需要的：

Answer 1

你用过的classbox我猜是那个有阴影的盒子。在 ion-row 上使用此 class 而不是 ion-grid 。连同在 ion-row

中使用一些 margin-bottom

HTML 使用 Ionic 3，如何分隔行

HTML with Ionic3, how to seperate rows

html

ionic-framework

ionic3