3

我们的大部分项目都在使用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。

4

2 回答 2

1

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

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

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

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

于 2015-01-08T15:54:34.020 回答
1

Bootstrap 网站上的这个页面告诉你如何规避这个问题。简而言之， box-sizing:border-box 会混淆一些计算。

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

只需添加这个 CSS 片段：

.ui-layout-container, .ui-layout-pane {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
于 2015-06-24T05:57:44.763 回答