twitter-bootstrap Bootstrap - 具有相同高度和宽度的面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32352711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - panels with same height and width
提问by ltdev
I'm having a div.rowthat contains 3 panels with different contents:
我有一个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>
I'd like to set all panels to have the same height, no matter their content, like on this topic Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row, so I have set my .equalclass.
我想将所有面板设置为具有相同的高度，无论它们的内容如何，就像在这个主题Twitter Bootstrap 3 - 流体行中的等高面板一样，所以我已经设置了我的.equal类。
.equal, .equal > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
The problem is that, although the height is set equal to all panels the width of each panel has changed, so now my panels don't have the same width (the default one).
问题是，虽然高度被设置为与所有面板相等，但每个面板的宽度都发生了变化，所以现在我的面板没有相同的宽度（默认的）。
Is there a way I can fix the width too, or maybe use another way to have in all my panels same width and height?
有没有办法我也可以固定宽度，或者使用另一种方法让我的所有面板具有相同的宽度和高度？
采纳答案by Paulie_D
I think you want something like this:
我想你想要这样的东西：
Setting separated for ease of reference.
设置分开以便于参考。
.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%;
}
回答by stackoverfloweth
what if you set the height of the parent and all children with height of 100%?
如果您将父级和所有子级的高度设置为 100% 会怎样？
.equal{
height:200px;
}
.col-md-4, .panel{
height:100%;
}
