javascript - Boostrap body-content div 内で JQuery UI Layout Plugin を機能させる方法

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」のテキストは表示されません)。しかし、body-content div を使用しないように HTML を変更し、'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です。