如何根据其他列动态改变引导列的宽度？

Question

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

当col sm-5的高度小于col sm-7的高度时(或者换句话说:当侧边栏上没有内容时)，有没有办法使col sm-7中的内容扩展到col sm-12？问题是，侧边栏将占据所有右侧，这不美观。)

下面这张图片展示了我的意思：

​

​

Answer 1

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

把侧边栏放在第一位，然后把它放在右边。

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

将col-sm-7 width设置为auto，并取消其浮动。

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

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

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

AFAIK，flexbox不能很好的工作。

Answer 2

我在bootstrap中看不到一个简单的方法来做这件事(也许在bootstrap 4中使用flexbox...) --两组内容都在非常不同的容器中。你也许可以通过一个小的javascript和一些CSS技巧来实现它，但这并不可取。此示例中的代码未经测试。

无论如何，一种可能的方法是将您的侧边栏放在与博客内容相同的列中(eugh)，并将每个content列-7和您的sidebar列-5。

此时，您可以使用jQuery通过比较侧栏的高度(比方说400)和列的高度(比方说每列的高度)来计算哪些行应该扩展到col-12以填充侧栏下的空间。这样，你就知道4个content项目加起来等于400 (侧边栏的高度)。这意味着从第四个元素开始，您可以将类更改为col 12。

var contentItems = $(".content"); // your 'content' items
var sidebar = $(".sidebar");
var contentItemHeight = $(".content").first().height;
var sidebarHeight = $(".sidebar").height;

var smallColumns = sidebarHeight / contentItemHeight; // 4
var $i = 1;

$.each($contents, function(){
  if($i <= smallColumns){
    // Next to sidebar
    $(this).addClass(".col-xs-7");
  }else{
    // Below sidebar
    $(this).addClass(".col-xs-12");
  }
})

// Edited to remove accidental switch to PHP