Bootstrap - 高度和宽度相同的面板

Question

我正在使用一个包含3个不同内容面板的div.row。这些面板是：

<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: http://jsfiddle.net/aroxv143/

- ltdev

---

你的意思是默认情况下.panel应该占据整个col-md-4的宽度吗？ - vivekkupadhyay

Answer 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演示

- Paulie_D

---

这不是响应式的。 - ymakux

是的...是这样的...请查看Codepen演示。 - Paulie_D

我的意思是面板不要堆叠。尝试添加更多的面板（例如4个X col-md-3）- 你会得到水平滚动条。 - ymakux

运行得很好。你让我省去了很多烦恼。 - Yonas Alemayehu

Answer 2

如果将父元素和所有子元素的高度都设置为100％，会发生什么？

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

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

- stackoverfloweth