jquery - jqxsplitter 内的响应式引导面板

Question

我有一个小提琴，其中引导面板放置在 2 列结构中，一旦我将窗口调整到一定大小，它们就会垂直堆叠，这绝对是我需要的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel1"> Panel1 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel1">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel2"> Panel2 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel2">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
       
      <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel3"> Panel3 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel3">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>

            <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel4"> Panel4 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel4">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
    </div>
    
    <div class="col-md-6">
      
            <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel5"> Panel5 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel5">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
                  <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel6"> Panel6 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel6">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
    </div>
  </div>
</div>

现在我有另一个小提琴，我在 jqxsplitter 中放置了相同的引导面板，并希望在调整面板大小时会发生相同的行为

$('#toggleSearchPane').on('click', function(){
	var isExpanded = $('#nestedSplitter').data('expanded');
  if(isExpanded)
  	$('#nestedSplitter').jqxSplitter('collapse');
  else
    $('#nestedSplitter').jqxSplitter('expand');
});

$('#toggleErrorLogPane').on('click', function(){
	var isExpanded = $('#mainSplitter').data('expanded');
  if(isExpanded)
  	$('#mainSplitter').jqxSplitter('collapse');
  else
    $('#mainSplitter').jqxSplitter('expand');
});

$('#mainSplitter').jqxSplitter({
                width: '100%',
                height: 750,
                orientation: 'vertical',
                panels: [
                         { size: '85%', collapsible: false },
                         { size: '15%', collapsible: true }
                ]
            });
            
            $('#nestedSplitter').jqxSplitter({
                width: '100%',
                height: 750,
                orientation: 'vertical',
                panels: [
                         { size: '35%', collapsible: true },
                         { size: '65%', collapsible: true }
                ]
            });
            
  $('#mainSplitter').on('resize', function (event) {
      //displayEvent(event);
  });

  $('#mainSplitter').on('expanded', function (event) {
  		$(this).data('expanded',true);
      //displayEvent(event);
  });

  $('#mainSplitter').on('collapsed', function (event) {
  		$(this).data('expanded',false);
      //displayEvent(event);
  });
  
  $('#nestedSplitter').on('resize', function (event) {
      //displayEvent(event);
  });

  $('#nestedSplitter').on('expanded', function (event) {
      $(this).data('expanded',true);
      //displayEvent(event);
  });

  $('#nestedSplitter').on('collapsed', function (event) {
      $(this).data('expanded',false);
      //displayEvent(event);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<input id="toggleSearchPane" type="button" value="Toggle Search Pane" />

<input id="toggleErrorLogPane" type="button" value="Toggle Error Log Pane" />

<br /><br />
<div id='jqxWidget'>
    <div id="container-fluid" style="float: left; width: 100%; height: 100%;">
        <div id="mainSplitter" data-expanded="true">
            <div>
                <div id="nestedSplitter" data-expanded="true">
                    <div id="searchPane">
                        Search Pane</div>
                    <div id="infoPane" style="overflow:auto;">
                    <div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel1"> Panel1 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel1">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel2"> Panel2 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel2">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
       
      <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel3"> Panel3 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel3">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>

            <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel4"> Panel4 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel4">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
    </div>
    
    <div class="col-md-6">
      
            <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel5"> Panel5 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel5">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
                  <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel6"> Panel6 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel6">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
    </div>
  </div>
</div>
                        </div>
                </div>
            </div>
            <div id="msgPane">
              Messaging pane</div>
        </div>
    </div>
</div>

当我们调整拆分器的大小时，有没有一种方法可以让我在 jqxsplitter 中拥有相同的响应行为。任何帮助将不胜感激。谢谢！！！