Bootstrap - 具有相同高度和宽度的面板答案

【问题标题】：Bootstrap - panels with same height and widthBootstrap - 具有相同高度和宽度的面板
【发布时间】：2015-11-27 22:27:14
【问题描述】：

我有一个 div.row，其中包含 3 个不同内容的面板：

<div class="row equal">

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 1</h3>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 2</h3>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 3</h3>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

</div>

我想将所有面板设置为具有相同的高度，无论它们的内容如何，例如关于这个主题 Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row，所以我设置了我的 .equal 类。

.equal, .equal > div[class*='col-'] {  
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex:1 1 auto;
}

问题是，虽然高度设置为等于所有面板，但每个面板的宽度都发生了变化，所以现在我的面板没有相同的宽度（默认宽度）。

有没有办法我也可以固定宽度，或者可以使用其他方式在我的所有面板中具有相同的宽度和高度？

JSFiddle

【问题讨论】：

通过（默认）你的意思是.panel应该占据col-md-4的全部width？

标签： css twitter-bootstrap panel

【解决方案1】：

我想你想要这样的东西：

设置分开以便于参考。

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

div[class*='col-'] {
  flex:1 1 auto;
  background: lightblue;
  display: flex;
}
.panel {
  flex:1 0 100%;
}

Codepen Demo

【讨论】：

这不是响应式
是的...它是...查看 Codepen 演示。
我的意思是面板不堆叠。尝试添加更多面板（例如 4 X col-md-3） - 你会得到水平滚动条。
就像一个魅力。你让我免于头疼

【解决方案2】：

如果将父级和所有子级的高度设置为 100% 会怎样？

.equal{
    height:200px;
}
.col-md-4, .panel{
    height:100%;
}

https://jsfiddle.net/aroxv143/1/

【讨论】：