在 Twitter Bootstrap 3 网格类中使用 jQuery UI resizable()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26928654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery UI resizable() with Twitter Bootstrap 3 grid classes
提问by rsa
I would like to improve this vertical splitter : http://jsbin.com/xuyosi/1/edit?html,css,js,output.
我想改进这个垂直拆分器：http: //jsbin.com/xuyosi/1/edit?html,css,js,output。
use cases:
用例：
As the site uses Bootstrap, when I use the splitter to expand Column-1, Column-2 comes under column-1 which I do not want, rather I want them to be near each otherand the corresponding column width must increase.
Only upon screen resize/ mobile view I want those columns stacked upon each other and at that time the splitter must not be usable.
由于该站点使用 Bootstrap，当我使用拆分器扩展 Column-1 时，Column-2 位于我不想要的 column-1 之下，而是我希望它们彼此靠近并且相应的列宽必须增加。
只有在调整屏幕大小/移动视图时，我才希望这些列相互堆叠，那时分隔器不能使用。
Ultimately, the solution to this must be: Detect 2 columns are near each other - If so: Allow column resize and do not push the column down while resizing.
最终，对此的解决方案必须是：检测 2 列彼此靠近 - 如果是这样：允许调整列大小并且在调整大小时不要向下推列。
Thanks in advance!
提前致谢！
回答by Bass Jobsen
In Bootstrap the width of .containerclass responds on the screen width, below a screen width of 768px it is fluid, but smaller than 720 pixels. You can use that characteristics to turn the resizable function on or of:
在 Bootstrap 中，.container类的宽度响应屏幕宽度，低于 768 像素的屏幕宽度是流畅的，但小于 720 像素。您可以使用该特性来打开或关闭可调整大小的功能：
html
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
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%');
}
You probably also want that your columns adapt when the screen width changes:
您可能还希望您的列在屏幕宽度发生变化时进行调整：
$( 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
演示：http: //www.bootply.com/zfNflrRg83
update
更新
Thank you! I do not want to use container as it leaves space at the ends. Also, I need the those columns to be of size col-md-4 and col-md-8..
谢谢！我不想使用容器，因为它在末端留下空间。另外，我需要这些列的大小为 col-md-4 和 col-md-8..
I think you can use a container-fluidclass as shown beneath:
我认为您可以使用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>
and javascript:
和 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()));
}
});
});
