Html Bootstrap
0
最佳答案
0
Bootstrap框架的的一些默认功能可能现在无法满足我们对实际项目的需要, 比如javascript中的jquery插件 Modal.他的modal-body大小可能适合我们的实际需要.所以现在我们来看下如何自定义.
改变Bootstrap Modal的默认高度
如果你需要改变modal-body的高度使它自适应的话可以在自己的CSS里写入下面的代码.
#myModal .modal-body { |
max-height: 800px; |
} |
注意.我们这里设置的是max-height在Modal-body类元素上,而不是Modal盒子类.这样的话就可以说在800px的高度内隐藏滚动条了, 除非你的内部元素高度超出800px
改变Bootstrap Modal的默认宽度
按照下面的样式来重写bootstrap的Modal最大宽度
#myModal { |
/* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/ |
width: 900px; |
/* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */ |
margin: -250px 0 0 -450px; |
} |
这里设置了Modal的固定宽度为900PX, 注意这里的宽度不是modal-body的宽度, 这时候如果要让弹出的Modal居中的话,就要修改Modal的Margin-left了, 从原来的-280px 改为 -450px(900/2)
更改bootstrap Modal 的屏幕显示位置
如下代码:
#myModal { |
margin: -300px 0 0 -280px; /* PLAY THE WITH THE VALUES TO SEE GET THE DESIRED EFFECT */ |
} |
收获园豆：10
多谢 我试试看
