首页 文章

离子：适合离子网格含量

提问于
浏览 次
1

我最近一直在努力，因此我终于决定在这里发帖寻求帮助 .

下图显示了我现在得到的信息 . 我有一个离子卡（红色），里面有一个离子网格（蓝色），有6个离子行，最后两个包含3个离子色谱柱（绿色） .

没有为任何属性指定宽度（离子列具有 col-4 属性除外），最后两行占据了离子网格的整个宽度...我想实现两件事：

最后两行适合其内容（即所有cols具有最长内容的单元格宽度）;然后，获得该网格，该网格现在将比离子卡的宽度短一个宽度，并将其水平居中在卡上 . 谁能指导我？谢谢！

Screenshot
Image

这是生成的html代码：

<ion-card class="card card-md">

  <ion-card-content class="card-content card-content-md">
    <ion-grid class="grid">

        <ion-row class="row">orci ut</ion-row>

        <ion-row class="row">lorem ipsum dolor</ion-row>

        <ion-row class="row">consectetur adipiscing </ion-row>

        <ion-row class="row">tristique</ion-row>

        <ion-row class="row">
      <ion-col class="col" col-4="">netus</ion-col>
      <ion-col class="col" col-4="">dui sollicitudin lacinia </ion-col>
      <ion-col class="col" col-4="">accumsan</ion-col>
    </ion-row>
    <ion-row class="row">
      <ion-col class="col" col-4="">Phasellus porta</ion-col>
      <ion-col class="col" col-4="">bibendum</ion-col>
      <ion-col class="col" col-4="">tempor eget</ion-col>
    </ion-row>

    </ion-grid>
  </ion-card-content>
</ion-card>
css css3 ionic-framework ionic3

1 回答

  • 0

    我希望我能做到这一点：首先，如果您的列应符合其内容，只需省略 col-4 即可 . 请参阅docs：

    默认情况下，对于所有设备和屏幕大小，列将在行内占据相同的宽度 .

    要使列水平居中，可以使用 text-align CSS属性 . 请参阅developer.mozilla.org上的说明：

    text-align CSS属性指定内联或表格单元格框的水平对齐方式 . 这意味着它的工作方式类似于vertical-align，但在水平方向上 .

    结果可能看起来像这样（我使用的是内联样式，如果它适用于您，您可能希望将这些样式添加到CSS中）：

    <ion-card class="card card-md">
    <ion-card-content class="card-content card-content-md">
        <ion-grid class="grid">

            <ion-row class="row">orci ut</ion-row>
            <ion-row class="row">lorem ipsum dolor</ion-row>
            <ion-row class="row">consectetur adipiscing </ion-row>
            <ion-row class="row">tristique</ion-row>

            <ion-row class="row" style="text-align: center">
                <ion-col class="col">netus</ion-col>
                <ion-col class="col">dui sollicitudin lacinia </ion-col>
                <ion-col class="col">accumsan</ion-col>
            </ion-row>
            <ion-row class="row" style="text-align: center">
                <ion-col class="col">Phasellus porta</ion-col>
                <ion-col class="col">bibendum</ion-col>
                <ion-col class="col">tempor eget</ion-col>
            </ion-row>

        </ion-grid>
    </ion-card-content>
</ion-card>
    回复于

相关问题