jquery - 调整大小时 jquery-ui 和 bootstrap 3 之间的冲突

Question

我同时使用 bootstrap 3 和 jquery-ui，但在调整对话框大小时遇到​​问题。

我正在使用 bootstrap 的网格系统和一些样式，所以我无法删除库或使用 Jquery.noConflict()。

我使用 jquery-ui 创建了一个对话框，里面有一个 Iframe，无需 Bootstrap 就可以正常工作，但是当包含该 css 时，在调整对话框几次后，右边距会增加。

我创建了一个显示问题的 jsfiddle。

$('a#pop').on('click', function (e)
{
    e.preventDefault();
    var page = $(this).attr("href");
    var pagetitle = $(this).attr("title");
    var myDialog = $('<div></div>')
    .html('<iframe style="border: 0; " src="' + page + '" width="100%" height="100%"></iframe>')
    .dialog({
        autoOpen: false,
        modal: false,
        height: 500,
        width: 600,
        title: pagetitle,
        open: function (event, ui)
        {
            myDialog.css('overflow', 'hidden');
        }
     });
     myDialog.dialog('open');
});

http://jsfiddle.net/dani2688/6m4VN/

有人知道如何在不删除 Bootstrap 的情况下解决这个问题吗？

我还找到了一个 jquery-bootstrap 库，但使用它也会出现问题。 https://github.com/addyosmani/jquery-ui-bootstrap

使用此 css，边距看起来不错，但在调整对话框几次后，内容增长超过了框架。

.ui-dialog .ui-dialog-content {
    -webkit-box-sizing: initial;
    -moz-box-sizing:initial;
     box-sizing: initial;`
 }

使用这个解决了右边距的问题，但底部的问题没有解决，出于某种奇怪的原因，使用#ui-id-* 不能解决问题，我需要输入具体的 id，这不好因为每次打开新对话框时都会发生变化。

.ui-dialog *{
    box-sizing: border-box;
 }

#ui-id-1{
    width: 100% !important;
}

关于如何解决这个问题还有其他想法吗？

最后，我找到了这个问题的解决方案:在 css 文件中放置:

ui-dialog-content {
    width: 100% !important;
    height: 100% !important;
}

iframe {
    height: 100% !important;
    padding-bottom:35px;
}

(.iframe是我在iframe组件中添加的类)

Answer 1

.ui-dialog,.ui-dialog-content {
    -webkit-box-sizing: content-box!important;
    -moz-box-sizing:content-box!important;
    box-sizing: content-box!important;
}