javascript - 如何根据其他列动态更改 Bootstrap 列宽度？

Question

假设我们在 bootstrap 中创建了一行，然后添加了两列，一个用于博客内容，位于左侧 (col-sm-7)，另一个用于侧边栏 (col-sm-5)，位于右侧。

当 col-sm-5 的高度小于 col-sm-7 的高度时(或者换句话说: when there's no content on the sidebar?: 假设用户只添加了一个小部件。问题是，侧边栏将占据所有右侧，这不好看。)

这是一张展示我的意思的图片:

Answer 1

如前所述，使用标准的 Bootstrap 网格无法做到这一点。然而，通过遵守这些“规则”，通过一些 CSS 调整是可能的。

先放侧边栏，然后向右浮动..

<div class="col-sm-5 pull-right">
            ..
</div>

使 col-sm-7 宽度为自动，并取消 float 它..

.float-none {
    float: none;
    width: auto;
}

最后，col-sm-7 内的任何子 DIV 都需要overflow: auto...

演示: http://codeply.com/go/njEg31ZG33

据我所知，flexbox 对此效果不佳。