假设我们在 bootstrap 中创建了一行,然后添加了两列, 一个用于博客内容,位于左侧 (col-sm-7),另一个用于侧边栏 (col-sm-5),位于右侧。
当 col-sm-5 的高度小于 col-sm-7 的高度时(或者换句话说: when there's no content on the sidebar?: 假设用户只添加了一个小部件。问题是,侧边栏将占据所有右侧,这不好看。)
这是一张展示我的意思的图片:
最佳答案
如前所述,使用标准的 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 对此效果不佳。
关于javascript - 如何根据其他列动态更改 Bootstrap 列宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43327010/