如何将v-tour中的单个按钮宽度拉伸至弹窗100%
解决按钮铺满弹窗宽度的问题
当前弹窗最大宽度为250px,想要让按钮拉伸至弹窗整个宽度,你之前直接设置固定250px宽度的方式可能会因为弹窗或父容器的内边距导致按钮无法完美对齐。可以试试以下修改方案:
- 移除父容器和按钮的固定
250px宽度设置,改用相对宽度适配 - 给父容器设置
width: 100%确保它占满弹窗的可用宽度,同时清除不必要的内边距 - 给按钮设置
width: 100%,并加上box-sizing: border-box保证按钮的边框、内边距不会超出父容器宽度
修改后的代码片段:
<div slot="actions" style="width: 100%; padding: 0; text-align: left;"> <button @click="signup()" class="btn btn-primary btn-next" style="width: 100%; box-sizing: border-box;">Sign up</button> </div>
这样设置后,按钮会自动适配弹窗的宽度,不管弹窗是否有内边距,都能完美铺满整个弹窗的宽度,达到你想要的效果。
内容的提问来源于stack exchange,提问作者Kanika Gupta
相关产品推荐
相关产品推荐

