什么是保持Bootstrap列的所有偶数高度的最佳方法

Question

以下图片来自this url。

如果列中的内容的高度不同，那么使Bootstrap中的所有列保持相同高度的最佳方法是什么？我们需要的是这样一种风格，＆＃34;使此列至少与此行中最高的列一样高。＆＃34;

Answer 1

Flexbox 是您的朋友！

CSS：

#container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

#container div {
    border: 1px solid silver;
}

HTML：

<div id="container" class="row">
    <div class="col-xs-1"><p>Box 1</p></div>
    <div class="col-xs-1"><p>Box 2</p></div>
    <div class="col-xs-1"><p>Box Box Box Box 3</p></div>
    <div class="col-xs-1"><p>Box 4</p></div>
    <div class="col-xs-1"><p>Box 5</p></div>
    <div class="col-xs-1"><p>Box 6</p></div>
    <div class="col-xs-1"><p>Box 7</p></div>
    <div class="col-xs-1"><p>Box 8</p></div>
    <div class="col-xs-1"><p>Box 9</p></div>
    <div class="col-xs-1"><p>Box 10</p></div>
    <div class="col-xs-1"><p>Box 11</p></div>
    <div class="col-xs-1"><p>Box Box 12</p></div>
</div>

example