ionic-framework - 在 ionic 中对齐按钮

Question

我正在学习 ionic ，我想在左、中和右对齐我的 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>

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

Answer 1

您可以使用 Grid、ionic 提供它来实现此目的 grid link

它基于 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>

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

 <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>