正确设置网格布局答案

【问题标题】：Set grid layout properly正确设置网格布局
【发布时间】：2017-05-22 13:11:28
【问题描述】：

我需要构造radio buttons，如下所示。

图片 1

我试过如下图。

.html

<ion-row>
      <ion-col col-6>
         <ion-grid radio-group formControlName="location">
             <ion-row>
                 <ion-col col-12>
                    <ion-item *ngFor="let l of locations;let index = index">
                         <ion-label class="custom-radio">
                             <ion-radio value="{{index}}"></ion-radio>
                                <i class="{{l.icon}}"></i><br/> {{l.description}}
                         </ion-label>
                    </ion-item>
                 </ion-col>
             </ion-row>
          </ion-grid>
      </ion-col>

  <ion-col col-6>
    //other part           
  </ion-col>
</ion-row>

然后它看起来像下面。

你能告诉我如何设计它看起来像image 1吗？

【问题讨论】：

标签： html css ionic-framework sass

【解决方案1】：

如果您可以发布您的 HTML 和 CSS，那么我很乐意帮助您编写实际代码。但是，原则上，您可以这样做；

HTML

<div class="ion-item">
    <i class="l-icon"></i>
    <span class="l-description">Text below the image</span>
</div>

CSS

.ion-item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 60px;
}
.l-icon {
    width: 50px;
    height: 50px;
}
.l-description {
    display: block;
}

【讨论】：