在bootstrap 4中使列可调整大小

Question

我正在使用bootstrap 4并且它很棒但是有什么方法我可以添加某些列,例如可调整大小的另一个类,并且可以添加min-width或max-width,它们将在这些限制内可调整大小.那太棒了.

我没有具体提到任何现有的库.我只是在寻找这个问题的解决方案.

示例代码是:

<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>

非常感谢你

Answer 1

Split.js对我来说非常合适,如果你使用flex(bootstrap 4),你还必须添加elementstyle和gutterstyle属性.

工作示例:https://htmlpen.com/-a968ne5qd1/editor/

这就是我做到的

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:

.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库:

<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js"></script>

码:

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'
});

Answer 2

https://nathancahill.github.io/Split.js/

您可以使用split js，为您的元素赋予id并设置默认大小，因为您正在使用引导程序，因此您已经对Jquery有依赖性，所以这不应该成为问题。

2018年11月5日更新

github链接现在是：https : //github.com/nathancahill/split

Split(['#one', '#two'], {
  sizes: [500, 100],
  minSize: 200
});

div {border: 2px solid black;background: #ccc;height: 170px;}body {display: flex}

<div class="col resizable" id="one"></div>
<div class="col resizable" id="two"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js">
</script>