jQuery QueryBuilder选择的插件在引导选项卡中不起作用

Question

我已经使用所选插件成功实现了jQuery查询生成器，但是我想将其放在bootstrap选项卡中，这会导致显示中断。

我在这里使用的JavaScript只是非常基本的，可以在此JsFiddle中按预期工作：https://jsfiddle.net/xL0748ua/

$('#builder-widgets').queryBuilder({
  plugins: ['chosen-selectpicker'],
  filters: [
    {
      id: 'australia',
      label: 'Australia',
      type: 'string',
    },
    {
      id: 'united-kingdom',
      label: 'United Kingdom',
      type: 'string',
    },
    {
      id: 'japan',
      label: 'Japan',
      type: 'string',
    },
    {
      id: 'new-zealand',
      label: 'New Zealand',
      type: 'string',
    },
    {
      id: 'canada',
      label: 'Canada',
      type: 'string',
    }
  ]
})

但是，在这个分叉的JsFiddle中，我将#builder-widgets选择器放到了选项卡中，并且显示损坏了。

https://jsfiddle.net/pq52sfoe/

<div class="row">
  <div class="col-sm-9">
    <ul class="nav nav-tabs">
      <li>
        <a href="#tab-1" role="tab" data-toggle="tab" class="active">Tab 1 with query builder</a>
      </li>
      <li>
        <a href="#tab-2" role="tab" data-toggle="tab">Tab 2</a>
      </li>
      <li>
        <a href="#tab-3" role="tab" data-toggle="tab">Tab 3</a>
      </li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade" id="tab-1">
        <div class="row">
          <div class="col-sm-12">
            <div id="builder-widgets"></div>
          </div>
        </div>
      </div>

      <div role="tabpanel" class="tab-pane fade" id="tab-2">
      </div>

      <div role="tabpanel" class="tab-pane fade" id="tab-3">
      </div>

    </div>
  </div>
</div>

使用QueryBuilder selected-plugin在启动标签中显示：

是否需要一些不同的配置选项才能使其正常工作？还是查询生成器本身存在错误？