javascript - 如何使 JQuery UI 布局插件在 Bootstrap body-content div 中工作

Question

我们一直在使用JQuery UI Layout Plugin对于我们的大多数项目。我们已经启动了一个使用 Bootstrap 作为框架的新项目。我们尝试了一个简单的布局示例，使用 Bootstrap 容器，但布局不会呈现，实际上没有呈现 html。我的感觉是，不知何故，Bootstrap 和 JQuery UI Layout 表现不佳。现在，对于代码:

这就是我们试图为 HTML 做的事情:

<div class="container body-content">
    <div class="ui-layout-west">
        <div>West</div>
    </div>
    <div class="ui-layout-center">
        <div>Center</div>
    </div>
</div>

这就是我们尝试为 Javascript 做的事情:

$(document).ready(function(){
   var globalLayout = $('div.body-content').layout();
});

但是，HTML 根本不会呈现(我们看不到“West”或“Center”文本)。但是，如果我将 HTML 更改为不再使用 body-content div 并使用“body”来创建布局，我们就可以了。

工作 HTML:

<div class="container body-content"></div>

<div class="ui-layout-west"><div>West</div></div>
<div class="ui-layout-center"><div>Center</div></div>

工作 JS:

$(document).ready(function(){
    var globalLayout = $('body').layout();
});

这是一个JSFiddle它不起作用，这是一个 JSFiddle它的工作。

Answer 1

问题似乎与高度计算有关。

以下 CSS 调整有助于您的演示，但不是完美的解决方案。通过一些额外的 CSS 检查，我相信您会找到适当的最终调整

html,body, .container{height:100%}

http://jsfiddle.net/25m9qsar/1