Question

在离子中如何从底部离子含量中按一定百分比的按钮？

我试过

<ion-view>
   <ion-content>
       <div class="button-bottom">
         <button class="button button-block button-energized">Button</button>
       </div>
   </ion-content>
</ion-view>

的CSS：

.button-bottom{
position: absolute;
bottom: 30%;
}

但按钮现在没有占据整个宽度。

Answer 1

尝试为容器提供明确的宽度：

.button-bottom{
position: absolute;
bottom: 30%;
width: 100%;
}

Answer 2

在full

中添加“button”变量

例如： - button class="button button-block button-energized" full >Button</button＆gt;

有关更多参考，请参阅以下链接中的UI组件上的Ionic Documentation。

Ionic Full Button

Answer 3

只需将按钮移至离子含量之外即可。

示例：

离子3：

<ion-view>
   <ion-content>

   </ion-content>

       <div class="button-bottom">
         <button class="button button-block button-energized">Button</button>
       </div>

</ion-view>

离子4：

<ion-header>
  <ion-toolbar>
    <ion-title>Example</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

<p> your content </p>

</ion-content>

<ion-row>
  <ion-col>
    <ion-button>
      Button Bottom (Not fixed on scroll)
    </ion-button>
  </ion-col>
</ion-row>

离子：从底部

3 个答案: