javascript 在 bootstrap 4 中调整列的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49370421/
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
Making columns resizable in bootstrap 4
提问by chickens
I am using bootstrap 4 and it is great but Is there any way I can add certain columns another class like resizable and maybe add min-width or max-width and they will be resizable within these limits. That would be so great.
我正在使用 bootstrap 4，它很棒但是有什么方法可以添加某些列另一个类，比如可调整大小，并且可能添加最小宽度或最大宽度，它们将在这些限制内调整大小。那太好了。
I'm not referring to any existing library specifically. I am just looking for a solution to this problem.
我不是专门指任何现有的图书馆。我只是在寻找解决此问题的方法。
An example code would be:
示例代码是：
<div class="row">
<div class="col" resizable style="max-width:500px;"></div>
<div class="col" resizable></div>
<div class="col" style="min-width:100px;"></div>
<div class="col"></div>
</div>
Thank you very much
非常感谢你
采纳答案by chickens
Split.js just worked perfect for me, If you are using flex (bootstrap 4) you also must add elementstyle and gutterstyle attributes.
Split.js 对我来说非常完美，如果您使用 flex（引导程序 4），您还必须添加 elementstyle 和 gutterstyle 属性。
This is how I did it
这就是我做到的
HTML:
HTML：
<div class="row no-gutters" style="height:300px">
<div id="one" class="col">A</div>
<div id="two" class="col">B</div>
<div id="three" class="col">C</div>
</div>
CSS:
CSS：
.split {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;overflow-y: auto;overflow-x: hidden;}
.gutter {background-color: transparent;background-repeat: no-repeat;background-position: 50%;}
.gutter.gutter-horizontal {cursor: col-resize;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); }
.gutter.gutter-vertical {cursor: row-resize;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); }
.split.split-horizontal, .gutter.gutter-horizontal { height: 100%;float: left;}
JS Library :
JS库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js"></script>
Code:
代码：
var splitobj = Split(["#one","#two","#three"], {
elementStyle: function (dimension, size, gutterSize) {
$(window).trigger('resize'); // Optional
return {'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'}
},
gutterStyle: function (dimension, gutterSize) { return {'flex-basis': gutterSize + 'px'} },
sizes: [20,60,20],
minSize: 150,
gutterSize: 6,
cursor: 'col-resize'
});
回答by Joe Warner
You can use split js you'd give your elements an id and set default sizes, because you're using bootstrap you already have a dependency on Jquery so that shouldn't be an issue.
您可以使用 split js 为您的元素提供一个 id 并设置默认大小，因为您使用的是引导程序，您已经依赖于 Jquery，所以这应该不是问题。
Github link is: https://github.com/nathancahill/split
Github 链接是：https: //github.com/nathancahill/split
const GUTTER_SIZE = 30;
const gutterStyle = dimension => ({
'flex-basis': `${GUTTER_SIZE}px`,
});
const elementStyle = (dimension, size) => ({
'flex-basis': `calc(${size}% - ${GUTTER_SIZE}px)`,
})
Split(['#one', '#two'], {
sizes: [500, 100],
minSize: 200,
elementStyle,
gutterStyle
});div {
border: 2px solid black;
background: #ccc;
height: 170px;
}
.flex {
display: flex;
flex-direction: row;
}<section class="flex">
<div id="one"></div>
<div id="two"></div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js">
</script>