您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何根据内容动态调整Twitter Bootstrap模式的大小

如何根据内容动态调整Twitter Bootstrap模式的大小

由于您的内容必须是动态的,因此可以在模态show事件发生时动态设置模态的css属性,这将调整模态的大小,从而覆盖其认规格。被引导的原因是使用css规则将最大高度应用于模态主体,如下所示:

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

因此,您可以使用jquery css方法动态添加内联样式:

对于较新版本的引导程序,请使用 show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

对于旧版本的引导程序使用 show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

或使用CSS规则覆盖:

.autoModal.modal .modal-body{
    max-height: 100%;
}

并将此类添加autoModal到您的目标模态。

在小提琴中动态更改内容,您将看到模态相应地调整大小。 [Demo](http://jsfiddle.net/GDVdN/)

较新版本的bootstrap请参阅可用的event names

[modal events](http://twitter.github.io/bootstrap/javascript.html#modals)支持较旧版本的引导程序。

其他 2022/1/1 18:13:57 有704人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶