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

https://split.js.org/

您可以使用 split js，为您的元素提供一个 id 并设置默认大小，因为您使用的是 Bootstrap ，您已经依赖于 Jquery，所以这应该不是问题。

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>