我有一个包含 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;
}
问题是,虽然高度设置为等于所有面板,但每个面板的宽度已经改变,所以现在我的面板没有相同的宽度(默认宽度)。
有没有办法我也可以固定宽度,或者使用另一种方法让我的所有面板具有相同的宽度和高度?
最佳答案
我想你想要这样的东西:
设置分开以便于引用。
.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%;
}
关于css - Bootstrap - 具有相同高度和宽度的面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32352711/