我正在使用bootstrap v3的网格系统。在我的示例中（我的实际代码更复杂），我想在同一行中包含三列，所有列的高度均应相同。由于列是并排的，因此我可以将其height设置为100％。但是，在小屏幕上，它们会堆叠在一起，然后仍然占屏幕的100％。如何避免这种情况？
是包含以下内容的最佳解决方案：
@media (max-width: 768px) {
.small-vert-height{
max-height:50px;
height:auto;
}
}
在我的代码中，还是有一种更自然的引导方式来实现填充整个div并在小型显示器上仍然良好堆叠的列？
html,body, .container-fluid{
height:100%;
}
body{
padding:15px;
background-color:black;
}
.red-square{
background-color: red;
border-radius: 0;
}
.pink-square{
background-color:#B90276;
border-radius:0;
}
.green-square{
background-color:#78BE20;
border-radius:0;
color:white;
font-weight:bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="dummy_v2.css">
</head>
<body style="height:100%;">
<div class="container-fluid">
<div class="row" style="height:100%">
<div class="col-sm-1 pink-square" style="height:100%">
<h1> ldsafldsaf ald l </h1>
</div>
<div class="col-sm-10 red-square" style="height:100%">
<h1> ldsafldsaf ald l </h1>
</div>
<div class="col-sm-1 green-square" style="height:100%">
<h1> ldsafldsaf ald l </h1>
</div>
</div>
</div>
</body>
</html>最佳答案
我会考虑一个flexbox。您无需指定高度，因为所有伸缩项目都会自动拉伸。
html,
body,
.container-fluid {
height: 100%;
}
body {
padding: 15px;
background-color: black;
}
.container-fluid .row {
display: flex;
justify-content: space-around;
width: 100%;
}
.red-square {
background-color: red;
border-radius: 0;
width: calc(100% / 3);
}
.pink-square {
background-color: #B90276;
border-radius: 0;
width: calc(100% / 3);
}
.green-square {
background-color: #78BE20;
border-radius: 0;
color: white;
font-weight: bold;
width: calc(100% / 3);
}
@media (max-width: 768px) {
.small-vert-height {
max-height: 50px;
height: auto;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 pink-square">
<h1> ldsafldsaf ald l asdf sdafds asdfdsf</h1>
</div>
<div class="col-sm-10 red-square">
<h1> ldsafldsaf ald l </h1>
</div>
<div class="col-sm-1 green-square">
<h1> ldsafldsaf ald l </h1>
</div>
</div>
</div>关于html - Bootstrap，CSS和HTML:使用网格系统更改大小屏幕的高度的最佳方法？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45589824/