Использование jQuery UI resizable() with Twitter Bootstrap 3 grid classes

Question

Я хотел бы улучшить этот вертикальный разделитель: http://jsbin.com/xuyosi/1/edit?html,css,js,output.

случаи использования:

• Как сайт использует Bootstrap, когда я использую разветвитель для расширения Column-1, колонка-2 поставляется в колонке-1, который я не хочу , скорее я хочу, чтобы они были рядом друг с другом и соответствующая ширина столбца должна увеличиваться.

• Только на экране с изменением размера/мобильным видом Я хочу, чтобы эти столбцы располагались друг на друге, и в то время разделитель не должен использоваться.

В конечном счете, решение этой проблемы должно быть: Detect 2 колонки находятся рядом друг с другом - Если так: Разрешить столбец изменить размер и не толкать вниз колонки при изменении размера.

Заранее благодарен!

Answer 1

В бутстрапе ширина .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); 
      } 
     }   
    }); 

Demo: http://www.bootply.com/zfNflrRg83

обновление

Спасибо! Я не хочу использовать контейнер, поскольку он оставляет пространство на концах . Кроме того, мне нужны те столбцы, чтобы быть размером Col-мкр-4 и Col-мкр-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())); 
    }   
    }); 

    });