首页新闻找找看学习计划

Html Bootstrap

0
悬赏园豆:10 [已解决问题] 解决于 2013-10-21 19:21

大家有在用Bootstrap的吗?用了Bootstrap定义一个模态框(modal),弹出来的框格式不知道怎么调(框的高宽,停靠位置等等),求详解.

我的模态框里的东西有点宽 然后他给停到右面了,居中不了,有面的按钮啥的都看不见..

凌晨四点之洛杉矶的主页 凌晨四点之洛杉矶 | 初学一级 | 园豆:5
提问于:2013-10-21 10:50
< >
分享
最佳答案
0

Bootstrap框架的的一些默认功能可能现在无法满足我们对实际项目的需要, 比如javascript中的jquery插件 Modal.他的modal-body大小可能适合我们的实际需要.所以现在我们来看下如何自定义.

改变Bootstrap Modal的默认高度

如果你需要改变modal-body的高度使它自适应的话可以在自己的CSS里写入下面的代码.

#myModal .modal-body {
max-height800px;
}

注意.我们这里设置的是max-height在Modal-body类元素上,而不是Modal盒子类.这样的话就可以说在800px的高度内隐藏滚动条了, 除非你的内部元素高度超出800px

改变Bootstrap Modal的默认宽度

按照下面的样式来重写bootstrap的Modal最大宽度

#myModal {
/* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
width900px;
/* 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
神奇火箭队 | 菜鸟二级 |园豆:221 | 2013-10-21 11:58

多谢 我试试看

凌晨四点之洛杉矶 | 园豆:5 (初学一级) | 2013-10-21 19:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册