如何使 JQuery UI 布局插件在 Bootstrap 主体内容中工作 div

Question

我们的大部分项目一直在使用 JQuery UI Layout Plugin。我们已经启动了一个使用 Bootstrap 作为框架的新项目。我们尝试了一个简单的布局示例，使用 Bootstrap 容器，但布局不会渲染，实际上没有渲染 html。我的感觉是 Bootstrap 和 JQuery UI 布局不太好。现在，对于代码：

这就是我们要为 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 更改为不再使用正文内容 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 of it not working and here is a JSFiddle 的工作。

Answer 1

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

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

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

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

Answer 2

Bootstrap 站点上的

This page 告诉您如何规避该问题。 简而言之，box-sizing:border-box 混淆了一些计算。

如果您想快速测试，请转到您的 bootstrap css 文件并注释修改框大小的行，然后刷新页面 - 这对我来说效果很好。

只需添加此 CSS 片段：

.ui-layout-container, .ui-layout-pane {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}