将 jQuery UI resizable() 与 Twitter Bootstrap 3 网格类一起使用

Question

我想改进这个垂直分离器：http://jsbin.com/xuyosi/1/edit?html,css,js,output。

用例：

• 由于站点使用 Bootstrap，当我使用拆分器扩展 Column-1 时，Column-2 位于我不想要的 column-1 之下，而是我 希望它们彼此靠近，并且相应的列宽必须增加。

• 仅在屏幕调整大小/移动视图时，我希望这些列相互堆叠，此时 拆分器不得使用。

最终，对此的解决方案必须是：检测 2 列彼此靠近 - 如果是这样：允许调整列大小并且在调整大小时不要向下推列。

提前致谢！

Answer 1

在 Bootstrap 中，.container 类的宽度响应屏幕宽度，低于 768 像素的屏幕宽度是流动的，但小于 720 像素。您可以使用该特性来打开或关闭可调整大小的功能：

html

<div class="container">
 <div class="row">
     <div id="resizable" class="col-xs-12" style="background-color:green;">column 1</div>
     <div id="mirror" class="col-xs-12" style="background-color:red;">column 2</div>
 </div>      
</div> 

javascript

if($('.col-xs-12').width()>720 && $('.col-xs-12').width()==$('.container').width())
{
$( "#resizable" ).resizable({ maxWidth: $('.container').width()-200 });
$( "#resizable" ).on( "resize", 
function( event, ui ) {
    $('#mirror').css('width', $('.container').width() - $( "#resizable" ).width() );
    });
$('.col-xs-12').css('width','50%');
}

您可能还希望您的列在屏幕宽度发生变化时进行调整：

    $( window ).resize(function() {  

      if($('.container').width()<=720){
      $('.col-xs-12').css('width','100%');
      $( "#resizable" ).resizable({ disabled: true });
      }
      else {
          $( "#resizable" ).resizable({ disabled: false });
          if($('.col-xs-12').width()==$('.container').width())$('.col-xs-12').css('width','50%');
          else {
              $( "#resizable" ).css('width',( $('#resizable').width() / ($('#resizable').width() + $('#mirror').width()) ) * $('.container').width());
              $('#mirror').css('width', $('.container').width() - $( "#resizable" ).width() - 15 );
          } 
      }           
  });

演示：http://www.bootply.com/zfNflrRg83

更新

谢谢！我不想使用容器，因为它在 结束。另外，我需要这些列的大小为 col-md-4 和 col-md-8..

我认为您可以使用如下所示的container-fluid 类：

<div class="container-fluid" style="padding:0;">
 <div class="row" style="margin:0;">
     <div id="resizable" class="col-xs-12 col-md-4" style="background-color:green;">column 1</div>
     <div id="mirror" class="col-xs-12 col-md-8" style="background-color:red;">column 2</div>
 </div>      
</div> 

和javascript：

  $(function() {

    if($('.container-fluid').innerWidth()>992)
    {
    $( "#resizable" ).resizable({ maxWidth: $('.container-fluid').innerWidth()-200 });
    }

    $( window ).resize(function() {  
    if($('.container-fluid').innerWidth()<=992){
    $('.col-xs-12').css('width','100%');
    $( "#resizable" ).resizable({ disabled: true });
    }
    else {
    if($("#resizable").innerWidth()===$('.container-fluid').innerWidth())
    {
    $('.col-xs-12').css('width','');
    }
    $( "#resizable" ).resizable({ disabled: false, maxWidth: $('.container-fluid').innerWidth()-200 });
    $('#mirror').css('width', Math.floor($('.container-fluid').innerWidth() -  $( "#resizable" ).innerWidth()));
    }         
    });

  });