对齐离子按钮

问题描述

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

I am learning ionic and i want to align my 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right.

但是我不知道该怎么做？

But I don't know how to do it?

这是我的代码。

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

有人可以引导我吗？

推荐答案

您可以使用Grid来实现，ionic提供

You can achieve this using Grid, ionic provide it grid link

它基于基于屏幕大小的具有不同断点的12列布局。

It is based on a 12 column layout with different breakpoints based on the screen size.

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

By default, columns will take up equal width inside of a row for all devices and screen sizes.

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

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

Set the width of one column and the others will automatically resize around it. This can be done using our predefined grid attributes. In the example below, the other columns will resize no matter the width of the center column.

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

所以您也可以在左，中和右三个按钮。即使用网格，第一个按钮位于左侧，第二个位于中心，第三个位于右侧。

So you also can 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right using 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>

这篇关于对齐离子按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！