Question

在此示例中，所有列共享相同的高度：

http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height

在我的示例中：http://codepen.io/helloworld/pen/ogrjML

相同的css代码不会产生相同高度列的相同输出。

我错了什么？

我无法使用Flexbox！

<div class="container">      
<div class="row">
    <div class="row-same-height row-full-height">

        <div style="background:orange;" class="col-xs-9 col-xs-height col-full-height">

            <div class="item">
                <div class="content">
                <br><br><br><br><br><br><br>
                </div>
            </div>
        </div>

        <div style="background:red;" class="col-xs-3 col-xs-height col-full-height">
            <div class="item"><div class="content">test2</div></div>
        </div>
    </div>

</div>
</div>

Answer 1

最小化示例中有一些样式未包含在引导程序中。您需要添加以下内容以获得所需的高度：

.row-same-height {
  display: table;
  width: 100%;
}
.col-xs-height {
  display: table-cell;
  float: none;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}

Demo

bootstrap 3 row-same-height不起作用

1 个答案: