我的引导网站有一个问题，就是在加载页面时根据窗口大小调整3个水平列的大小。
我有一个脚本可以将3列调整到最大值的高度，这样即使页面调整大小也是如此。如果用户从大视口或全屏加载页面，这可以正常工作。但是，如果他们将页面加载到加载折叠布局的较小窗口中，则选择展开窗口，使列小于文本。刷新窗口显然可以修复它。
看一下下面的JSFiddle并调整窗口大小，然后在更大的窗口大小重新运行scipt，看它是否按预期工作。
https://jsfiddle.net/ycs9psr3/1/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<style>
.well {
background-color: #b2dcf7;
border-radius: 10px;
}
.well > img {
margin-bottom: 30px;
}
.well > h4, .well > p {
color: #16405b;
}
.container {
background-color: white;
border-width: 0px 1px;
box-shadow: 0px 3px 20px grey;
}
body {
background-color: #f6f6f6;
font-family: Verdana;
min-width: 540px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="well well-sm">
<img src="Images/example.svg" alt="Example" width="128" height="128">
<h4>Box 1</h4>
<p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="well well-sm">
<img src="Images/example.svg" alt="Example" width="128" height="128">
<h4>Box 2</h4>
<p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="well well-sm">
<img src="Images/example.svg" alt="Example" width="128" height="128">
<h4>Box 3</h4>
<p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>
</div>
</div>
</div>
</div>
<script>
$( window ).resize(function() {
var heights = $(".well").map(function() {
return $(this).height();
}).get(),b
maxHeight = Math.max.apply(null, heights);
$(".well").height(maxHeight);
});
</script>
</body>
</html>
任何帮助表示感谢。
答案 0 :(得分：0)
我已经修改了你的小提琴，只包括一个CSS版本。你不需要任何javascript，以便在bootstrap中保持类似的高度列。在此处查看此操作：https://jsfiddle.net/ycs9psr3/2/
相关：
body {
background-color: #f6f6f6;
font-family: Verdana;
min-width: 540px;
}
.container {
background-color: white;
}
.sameSize {
display: flex;
flex-wrap: wrap;
}
.sameSize > div[class*='col-'] {
display: flex;
flex-direction: column;
background-color: #b2dcf7;
background-clip: padding-box;
border: 10px solid transparent;
border-radius: 20px;
}
.well {
background-color: #b2dcf7 !important;
border:none !important;
}
.well > img {
margin-bottom: 30px;
}
.well > h4,
.well > p {
color: #16405b;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row sameSize">
<div class="col-md-4 text-center">
<div class="well well-sm">
<img src="Images/example.svg" alt="Example" width="128" height="128">
<h4>Box 1</h4>
<p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="well well-sm">
<img src="Images/example.svg" alt="Example" width="128" height="128">
<h4>Box 2</h4>
<p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>
</div>
</div>
<div class="col-md-4 text-center">
<div class="well well-sm">
<img src="Images/example.svg" alt="Example" width="128" height="128">
<h4>Box 3</h4>
<p>How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this How to fix this </p>
</div>
</div>
</div>
</div>