如何根据其他列动态更改bootstrap col width？

Question

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

有没有办法让col-sm-7中的内容扩展到col-sm-12,当col-sm-5的高度小于col-sm-7的高度时(换句话说:当没有col-sm-7时)侧边栏上的内容？:让我们说用户只添加一个小部件.问题是,侧边栏将占据所有右侧,这看起来并不好看.)

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

Answer 1

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

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

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

使col-sm-7宽度：自动，并取消浮动它..

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

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

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

AFAIK，flexbox 对此效果不佳。