Question

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

但我不知道怎么做？

这是我的代码。

yarn global add npm

有人可以指导我吗？因为我是初学者并且学习离子。

Answer 1

你可以使用Grid实现这一点，离子提供它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>

在离子中对齐按钮

1 个答案: