离子：使离子网格适合内容答案

【问题标题】：Ionic: Fit ion-grid with to content离子：使离子网格适合内容
【发布时间】：2019-02-05 16:39:11
【问题描述】：

我最近一直在努力解决这个问题，因此我最终决定在这里发布以寻求帮助。

下图显示了我现在得到的结果。我有一个离子卡（红色），里面有一个离子网格（蓝色），它有 6 个离子行，最后两个包含 3 个离子列（绿色）。

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

最后两行以适合其内容（即所有列的宽度与内容最长的单元格相同）；然后，得到那个网格，它现在将比离子卡的宽度短一个宽度，并将其水平居中放在离子卡上。谁能指导我？谢谢！

截图

这是生成的 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 ionic-framework ionic3

【解决方案1】：

我希望我做对了：首先，如果您的专栏应该适合他们的内容，只需省略 col-4。请参阅docs：

默认情况下，对于所有设备和屏幕尺寸，列将在一行内占据相等的宽度。

要使列水平居中，您可以使用text-align CSS 属性。见developer.mozilla.org上的描述：

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

结果可能看起来像这样（我使用的是内联样式，如果它适合您，您可能希望将这些样式添加到您的 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>

【讨论】：