如何让 flexbox 行为与引导列相结合答案

【问题标题】：How to get flexbox behavior COMBINED with bootstrap columns如何让 flexbox 行为与引导列相结合
【发布时间】：2015-10-29 06:02:32
【问题描述】：

问题：我无法让 Bootstrap 的响应列具有相同的高度。

解决方案： Stack Overflow 的 we-code-while-you-wait 服务将提供它。 ;)

设置：

我的问题是我正在使用引导响应列，例如

<div class="row">
    <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths">
         ...
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths">
         ...
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths">
         ...
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths">
         ...
    </div>
    <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-5ths col-lg-5ths">
         ...
    </div>
</div>

以便它们在不同的屏幕尺寸下占据不同的基于百分比的宽度，例如与您在下面看到的区别

您可以看到我在第二张图片中详细说明了我遇到的常见问题。解决方法是强制所有响应列具有相同的高度。

我知道如何使用 flexbox 使兄弟姐妹 divs 在同一行中时具有相同的高度，但是当应用于 Boostrap 列时这会搞砸。

在将flex:1 应用于 Bootstrap 响应列并将display:flex 应用于其父级后屏幕收缩时会发生什么的图片：

有不使用 JavaScript 的解决方案吗？

【问题讨论】：

如果您只是希望 Business Strategy 框位于新行中，您可以将 col-* 拆分为 div.row
@TasosK。但是，当屏幕处于最大宽度时，它会在新行上显示。

标签： html twitter-bootstrap css responsive-design

【解决方案1】：

看这个小提琴https://jsfiddle.net/fo5o8n8y/1/

只需将一个类添加到您想要相同大小的列，然后将这个 css 添加到它们：

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

【讨论】：