ion-col

Question

我的Ionic 2应用程序中有这个网格。是否有任何特定于离子的属性使按钮显示在列（行）的右侧？

<ion-grid>
  <ion-row>
    <ion-col>col 1</ion-col>
    <ion-col>col 2</ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <button ion-button>My button</button>
    </ion-col>
  </ion-row>
</ion-grid>

Answer 1

在您的情况下，您可以添加属性float-right，如下所示：

<button ion-button float-right>My button</button>

<强>浮子{改性剂}
documentation表示您可以添加属性float-{modifier}以将元素放置在其容器内。

{modifier}可以是以下任何一项：
right：元素将浮动在其容器的右侧 left：元素将浮动在其容器的左侧 start：如果方向是从右到左，则与float-left相同;如果方向是从右到左，则为{ - 1}}。左侧。 end：如果方向是从左到右，则与float-right相同;如果方向是从右到左，则为float-left。

示例：

<div>
    <button ion-button float-right>My button</button>
</div>

<强>本期特价货品{改性剂}
要将元素放在ion-item documentation内，您可以使用item-{modifier}。

{modifier}可以是以下任何一种：
start：放置在内部项目之外的所有其他元素的左侧 end：放置在输入包装外部的内部项目内的所有其他元素的右侧。
content：放置在输入包装内部的任何离子标签的右侧。

示例：

<ion-item>
    <button ion-button item-end>My button</button>
</ion-item>

<强>弃用
根据{{​​3}}，这些名称已被弃用：

item-right＆amp; item-left

Answer 2

被接受的解决方案对我不起作用。我认为这与离子v3有关，与当前无关。我这样解决了我的问题：

page.html：

<div class="test">
    <ion-button>My button</ion-button>
</div>

page.scss：

.test {
    float: right;
}