Question

我想在ion-button中实现三个ion-footer，分别分别左，中，右。似乎ion-button start和end左右可以做。

中间怎么样？我已经检查过API和离子组件，看起来ion-title默认居中，但是没有开箱即用的方法来获取中间的按钮？

Answer 1

在ion-footer元素中，尝试使用ion-grid，然后从网格中删除填充。

<ion-footer>
    <ion-grid>
        <ion-row no-padding no-margin>
            <ion-col col-4 no-padding>
                <button ion-button full>Button 1</button>
            </ion-col>
            <ion-col col-4 no-padding>
                <button ion-button full>Button 2</button>
            </ion-col>
            <ion-col col-4 no-padding>
                <button ion-button full>Button 3</button>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-footer>

Answer 2

您可以分别将float-start和float-end添加到第一个和第三个按钮。通过使用float-[start|end]代替float-[left|right]，您的按钮将使用应用direction

转移位置

<强> HTML：

<ion-footer>
  <div class="btn-wrapper">
    <button ion-button float-start>Button1</button>
    <button ion-button>Button2</button>
    <button ion-button float-end>Button3</button>
  </div>
</ion-footer>

<强> CSS：

.btn-wrapper {
    text-align: center;
}

修改为按钮添加了包裹<div>，并为其指定了样式text-align: center;，因为我遇到了奇怪的动画行为而没有包裹<div>。

如何在离子3的页脚中居一个按钮？

2 个答案: