在离子中对齐按钮

Question

我正在学习离子，我想在左、中和右对齐我的 3 个按钮。即左侧的第一个按钮，中间的第二个和右侧的第三个。

但我不知道该怎么做？

这是我的代码。

<div>
    <button ion-button icon-left>
            <ion-icon name="home"></ion-icon>
            Left Icon
        </button>

        <button ion-button icon-only>
            <ion-icon name="home"></ion-icon>
        </button>

        <button ion-button icon-right>
            Right Icon
            <ion-icon name="home"></ion-icon>
        </button>
  </div>

任何人都可以指导我吗？因为我是初学者和学习离子。

Answer 1

您可以使用 Grid 实现此目的，ionic 提供网格链接

它基于 12 列布局，根据屏幕尺寸具有不同的断点。

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

<ion-grid>
  <ion-row>
    <ion-col>
      1 of 2
    </ion-col>
    <ion-col>
      2 of 2
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col>
      2 of 3
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

设置一列的宽度，其他列将自动围绕它调整大小。这可以使用我们预定义的网格属性来完成。在下面的示例中，无论中心列的宽度如何，其他列都会调整大小。

<ion-grid>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col col-8>
      2 of 3 (wider)
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col col-6>
      2 of 3 (wider)
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

所以你也可以使用左、中、右 3 个按钮。即，使用网格，左侧第一个按钮，中间第二个按钮，右侧第三个按钮。

 <ion-grid>
    <ion-row>
      <ion-col col-4>
        <button ion-button>
          First
        </button>
      </ion-col>

      <ion-col col-4>
        <button ion-button>
          Second
        </button>
      </ion-col>

      <ion-col col-4>
        <button ion-button>
          Third
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>