Html 相同高度的列引导程序 3 行响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23287206/
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
Same height column bootstrap 3 row responsive
提问by user3279494
Hi I have four divs in a bootstrap row. I want all divs in this row to have the same height and not break responsibility. I don't know how to do this without breaking responsibility.
嗨，我在引导行中有四个 div。我希望这一行中的所有 div 都具有相同的高度并且不破坏责任。我不知道如何在不破坏责任的情况下做到这一点。
I have tried solving this with fixed heights but in terms of responsiveness this is a bad solution.
我试过用固定高度解决这个问题，但就响应能力而言，这是一个糟糕的解决方案。
Thanks :-)
谢谢 ：-）
<div class="row">
<div class="col-md-3 index_div_item">
<a href="#">
<div class="well" id="item1">
<h1 class="h1_item"><span class="titre_item">Title</span></h1>
<h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
<p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
</div>
</a>
</div>
<div class="col-md-3 index_div_item">
<a href="#">
<div class="well" id="item2">
<h1 class="h1_item"><span class="titre_item">Title</span></h1>
<h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
<p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
</div>
</a>
</div>
<div class="col-md-3 index_div_item">
<a href="#">
<div class="well" id="item3">
<h1 class="h1_item"><span class="titre_item">Title</span></h1>
<h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
<p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
</div>
</a>
</div>
<div class="col-md-3 index_div_item">
<a href="#">
<div class="well" id="item4">
<h1 class="h1_item"><span class="titre_item">Title</span></h1>
<h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
<p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
</div>
</a>
</div>
</div>
回答by paulalexandru
You can achieve this by using javascript. Find out the biggest height of the 4 divs and make all of them at the same height like the biggest one.
您可以通过使用 javascript 来实现这一点。找出 4 个 div 的最大高度，并使它们与最大的高度相同。
Here is the code:
这是代码：
$( document ).ready(function() {
var heights = $(".well").map(function() {
return $(this).height();
}).get();
maxHeight = Math.max.apply(null, heights);
$(".well").height(maxHeight);
});
edit history: changed the ',' sign into ';' sign
编辑历史记录：将“,”符号更改为“;” 标志
回答by cvrebert
There was at one point an official experimental exampleof same-height columns using CSS flexboxwith Bootstrap. Here's the gist of it:
曾经有一个使用CSS flexbox和 Bootstrap的相同高度列的官方实验示例。这是它的要点：
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
And then use <div class="row row-eq-height">instead of <div class="row">.
然后使用<div class="row row-eq-height">代替<div class="row">。
Note that flexbox isn't supported in IE<10.
请注意，IE<10 不支持 flexbox。
回答by FourLeafCleaver
FYI - I did this to solve my issue to include responsive breakpoints which match the breakpoints in bootstrap. (I use LESS variables from bootstrap to synchronise the breakpoints but below is the compiled css version)
仅供参考 - 我这样做是为了解决我的问题，以包含与引导程序中的断点匹配的响应断点。（我使用引导程序中的 LESS 变量来同步断点，但下面是编译后的 css 版本）
@media (min-width: 0px) and (max-width: 767px) {
.fsi-row-xs-level {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.fsi-row-sm-level {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.fsi-row-md-level {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media (min-width: 1200px) {
.fsi-row-lg-level {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
then added the classes to the parent which were required.
然后将所需的类添加到父类。
<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>
回答by maxime1992
EDIT 1 : I had to help someone with that so i made a plunkr. Go to "script.js" and comment "bootstrap_equalizer();" function to see original bootstrap, without same height columns.
编辑 1：我不得不帮助某人，所以我做了一个plunkr。转到“script.js”并注释“bootstrap_equalizer();” 功能查看原始引导程序，没有相同高度的列。
I know this is a bit late but i'm sure that could improve your code and help some others ! :)
我知道这有点晚了，但我相信这可以改进您的代码并帮助其他人！:)
As i'm used to work with Foundation 5, when i have to work with bootstrap i miss the "equalizer".
因为我习惯于使用 Foundation 5，所以当我必须使用引导程序时，我会想念“均衡器”。
I make a little function to call on pages where you have to "Equalize" some columns. My code is based on @paulalexandru response !
我做了一个小函数来调用你必须“均衡”一些列的页面。我的代码基于@paulalexandru 响应！
function bootstrap_equalizer() {
$(".equalizer").each(function() {
var heights = $(this).find(".watch").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".watch").height(maxHeight);
});
}
On html side, you just need to do this :
在 html 方面，你只需要这样做：
<div class="container">
<div class="row equalizer">
<div class="watch">
Column 1
</div>
<div class="watch">
Column 2
</div>
</div>
</div>
column 1 & column 2 will have same height ! You can of course have more than 2 columns !
第 1 列和第 2 列将具有相同的高度！你当然可以有超过 2 列！
Hope this can help ! =)
希望这可以帮助！=)
回答by Pete
You can make use of the display:tableproperties:
您可以使用以下display:table属性：
.row {display:table; width:100%; border-spacing:10px; }
.col-md-3 {display:table-cell; width:25%;}
Update
更新
As people seem to be downvoting this as it breaks bootstrap, you should really be targeting the elements with different classes to what bootstrap uses - so here is an updated fiddle that won't break the rest of bootstrap - for the above code, if you add another class of table-rowto the row, then you can use the following styles:
由于人们似乎在破坏引导程序时对此投反对票，因此您确实应该将具有不同类的元素定位到引导程序使用的元素 - 所以这里是一个更新的小提琴，不会破坏引导程序的其余部分 - 对于上面的代码，如果你table-row在行中添加另一个类，然后您可以使用以下样式：
@media (min-width: 992px) {
.row.table-row {
display: table;
width: 100%;
min-width: 800px;
border-spacing: 10px;
}
.row.table-row > .col-md-3 {
display: table-cell;
width: 25%;
}
.row.table-row > .col-md-3 {
float: none;
}
}
回答by Nirav Varma
I had same kind of situation wherein each column within a row should be of same height. By considering above answers and with little trick, it was easy to implement and resolve the issue of window resize also.
我有同样的情况，其中一行中的每一列都应该具有相同的高度。通过考虑上面的答案并用一点技巧，很容易实现和解决窗口调整大小的问题。
$(document).ready(function() {
//Initiate equalize on load
equalize();
});
//Equalize on resizing of window
$(window).resize(function() {
removeHeights();
equalize();
});
function equalize(){
$(".container .row").each(function() {
var heights = $(this).find("p").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(this).find("p").height(maxHeight);
});
}
function removeHeights(){
$(".container .row").each(function() {
$(this).find("p").height("auto");
});
}
Check the demo here - https://jsfiddle.net/3Lam7z68/(Resize the output pane to see the each div column size's changing)
在此处查看演示 - https://jsfiddle.net/3Lam7z68/（调整输出窗格的大小以查看每个 div 列大小的变化）
回答by Omar Gonzales
To have same columns height and not breaking responsiveness, you should try this:
要具有相同的列高度并且不破坏响应能力，您应该尝试以下操作：
https://github.com/liabru/jquery-match-height
https://github.com/liabru/jquery-match-height
It uses "JQuery". Until now, for me, It is the simpliest solution out there.
它使用“JQuery”。到目前为止，对我来说，这是最简单的解决方案。
回答by Antonio Vinicius Menezes Medei
Bootstrap's experiment, as mentioned by @cvrebert, works for me on Microsoft Internet Explorer (version 11) and Mozilla Firefox (version 37), but does not work for me on Google Chrome (version 42, 64-bit).
正如@cvrebert 所提到的，Bootstrap 的实验在 Microsoft Internet Explorer（版本 11）和 Mozilla Firefox（版本 37）上对我有用，但在 Google Chrome（版本 42，64 位）上对我不起作用。
Inspired by @cvrebert's and @Maxime's answers, I came up with this solution, that works for me on those three browsers. I decided to share it, so maybe others can use it too.
受到@cvrebert 和@Maxime 答案的启发，我想出了这个解决方案，它适用于这三个浏览器。我决定分享它，所以也许其他人也可以使用它。
Suppose you have something like this in your HTML:
假设您的 HTML 中有这样的内容：
<div class="row row-eq-height">
<div class="col-eq-height col-xs-3">
Your content
</div>
<div class="col-eq-height col-xs-3">
Your content
</div>
<div class="col-eq-height col-xs-3">
Your content
</div>
<div class="col-eq-height col-xs-3">
Your content
</div>
</div>
Add this to your JS:
将此添加到您的 JS：
$(document).ready(function() {
$(".row-eq-height").each(function() {
var heights = $(this).find(".col-eq-height").map(function() {
return $(this).outerHeight();
}).get(), maxHeight = Math.max.apply(null, heights);
$(this).find(".col-eq-height").outerHeight(maxHeight);
});
});
It uses jQuery's .outerHeight()function to calculate and set the inner div's heights.
它使用jQuery的.outerHeight()函数来计算和设置内部div的高度。
Also, I added this to my CSS, I'm not sure if this helps, but it surely does not hurt:
另外，我将此添加到我的 CSS 中，我不确定这是否有帮助，但它肯定不会受到伤害：
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
回答by shan
For all the div's to have the same height you have to specfy a fixed height for the inner div (div class="well"),
要使所有 div 具有相同的高度，您必须为内部 div 指定一个固定高度（div class="well"），
CSS
CSS
.index_div_item{
display: block;
height: 400px;
}
.index_div_item a .well{
height: 400px;
}
You can follow this link demofor example.
例如，您可以按照此链接演示。
回答by Beakie
I'm a bit late to the game, but....
我玩游戏有点晚了，但是......
This will align the heights of items in a row with a class of "row-height-matched". It matches the cells based on their top value so if they move underneath each other when the page gets smaller, I don't set the height.
这将使行中项目的高度与“行高匹配”类对齐。它根据单元格的最高值匹配单元格，因此如果当页面变小时它们在彼此下方移动，我不会设置高度。
I know there are a number of CSS versions out there, but all of them break my layout design.
我知道有许多 CSS 版本，但它们都破坏了我的布局设计。
$(window).resize(function () {
var rows = $(".row.row-height-matched");
rows.each(function () {
var cells = $(this).children("[class^='col-']");
cells.css("height", "");
var j = [];
cells.each(function () {
j.push($(this).offset().top);
});
var u = $.unique($(j));
u.each(function () {
var top = $(this)[0];
var topAlignedCells = cells.filter(function () {
return $(this).offset().top == top;
})
var max = 0;
topAlignedCells.each(function () {
max = Math.max(max, $(this).height());
})
topAlignedCells.filter(function () {
return $(this).height() != max;
}).height(max);
})
})
})
