css - bootstrap模态框为什么不居中

问题描述

问 题

1. 使用bootstrap模态框的时候, 发现, 不能设置居中, 如果需要的话, 比较多的方法都是改源码CSS, 那么, 这样做全部的模态框都是居中;

2. 为什么会出现这个现象, 是在交互上模态框不推荐使用, 还是有更好的方案?

3. 感觉一个模态框出来填写表单,不换新页面挺好的, 所有产生了这个疑问, 难道还有更优雅的交互设计?

居中的方法已经有很多了, 这里探讨一下为什么没有设置剧中, 有了解行情的朋友吗?

解决方案

1.模态框不能居中，你指的是水平居中还是垂直居中，bootstrap的模态框是水平居中的，没有垂直居中。

2.为什么不是垂直居中？

模态框的高度不是固定的，是用里面的内容撑的。你能做到当模态框里面的内容比你的屏幕高度还多的时候垂直居中吗？bootstrap的模态框垂直方向是用 margin: 30px auto 固定的。

3.如何做到垂直居中？

改的只是css效果，覆盖样式就行了。给模态框定死一个高度，再用css写垂直居中的样式就行了。

这篇关于css - bootstrap模态框为什么不居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！