Question

我正在使用bootstrap 4并且它很棒但是有什么方法我可以添加某些列，如可调整大小的另一个类，并且可以添加最小宽度或最大宽度，并且它们将在这些限制内可调整大小。那太棒了。

我并不是指具体的任何现有库。我只是在寻找解决这个问题的方法。

示例代码为：

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

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

在bootstrap 4中使列可调整大小

2 个答案: