twitter-bootstrap 具有相同高度的 Bootstrap 面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25715889/
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's Panels with the same height
提问by David TG
I have 3 bootstrap panels one next to another. They height of each of them is variable according to the information retrieved from the database. I want that the height of the 3 of them match. If one of them has less info, anyway adjust the height to the taller panel. I know that I must use display:table and display:table-cell but as Bootstrap has some nested divs to achieve the Panel view, it's very confusing... what do you suggest? Here is the code of each of my panels (very default to the Bootstrap example):
我有 3 个引导面板，一个挨着一个。根据从数据库中检索到的信息，它们每个的高度都是可变的。我希望其中 3 个的高度匹配。如果其中之一的信息较少，无论如何将高度调整到较高的面板。我知道我必须使用 display:table 和 display:table-cell 但由于 Bootstrap 有一些嵌套的 div 来实现面板视图，这非常令人困惑......你有什么建议？这是我的每个面板的代码（Bootstrap 示例的默认设置）：
<div class="col-sm-3 col-sm-push-1">
<div class="panel panel-default">
<div class="panel-body panelLoggedIn">
<a href="#">Example Link</a>
<a href="#">Example Link</a>
<a href="#">Example Link</a>
<a href="#">Example Link</a>
<a href="#">Example Link</a>
<a href="#">Example Link</a>
<a href="#">Example Link</a>
<a href="#">Example Link</a>
</div>
</div>
</div>
<div class="col-sm-3 col-sm-push-1">
<div class="panel panel-default">
<div class="panel-body panelLoggedIn">
<a href="#">Example Link</a>
<a href="#">Example Link</a>
</div>
</div>
</div>
<div class="col-sm-3 col-sm-push-1">
<div class="panel panel-default">
<div class="panel-body panelLoggedIn">
<a href="#">Example Link</a>
<a href="#">Example Link</a>
<a href="#">Example Link</a>
<a href="#">Example Link</a>
</div>
</div>
</div>
采纳答案by moledet
May do this only by css. Add rowdiv for panels.
只能通过 css 来做到这一点。为面板添加行div。
<div class="row equal">
<div class="col-sm-3 col-sm-push-1">
...
</div>
<div class="col-sm-3 col-sm-push-1">
...
</div>
<div class="col-sm-3 col-sm-push-1">
...
</div>
</div>
And add CSS
并添加 CSS
.equal, .equal > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
Demo in bootply
回答by Christina
If you do not want to use Flexbox and you do want to support legacy browsers, use jquery.matchHeight.js. It's responsive and small.
如果您不想使用 Flexbox 并且确实希望支持旧版浏览器，请使用jquery.matchHeight.js。它反应灵敏，体积小。
Put a .rowaround the columns with a class of your choice:
.row在列周围放置一个您选择的类：
<div class="row equal-height-panels">
... bootstrap columns with panels inside
</div>
Initialize the script using the class you created:
使用您创建的类初始化脚本：
$(document).ready(function() {
$('.equal-height-panels .panel').matchHeight();
});
DEMO: http://jsbin.com/diyux/2
Do not forget your .container or .container-fluid around the .row since that will remove the horizontal scrollbars from the negative left and right margins on the .row. Learn more about the bootstrap grid if that doesn't make sense.
不要忘记在 .row 周围使用 .container 或 .container-fluid ，因为这会从 .row 的负左右边距中移除水平滚动条。如果没有意义，请了解有关引导网格的更多信息。
回答by Bir
You can use this plugin
你可以使用这个插件
http://css-tricks.github.io/Equalizer/
http://css-tricks.github.io/Equalizer/
http://tsvensen.github.io/equalize.js/
http://tsvensen.github.io/equalize.js/
Just customize according to your requirement .
只需根据您的要求定制。
![twitter-bootstrap 没有路由匹配 [GET]](/res/img/loading.gif)