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

Question

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

用例:

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

• 仅在屏幕调整大小/移动视图时,我希望这些列彼此堆叠,此时分割器必须不可用.

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

提前致谢!

Answer 1

在Bootstrap中,.container类的宽度响应屏幕宽度,低于屏幕宽度768px它是流体,但小于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()));
    }         
    });

  });