你如何强制列 div 与其行的高度相同？ [复制]答案

【问题标题】：How do you force a column div to be the same height of its row? [duplicate]你如何强制列 div 与其行的高度相同？ [复制]
【发布时间】：2016-06-11 08:44:05
【问题描述】：

我正在学习引导程序，并且非常努力。我知道引导程序中的默认行高是能够包含子元素（即列）的任何高度。但是，一列的默认高度是占用最小的空间。

所以我的问题是：如何强制列的高度占据行的高度？假设我连续有两列。由于一列的内容更多，一列的高度大于另一列。如何强制兄弟列的高度相同？

我觉得我已经尝试了所有方法，但没有运气。我尝试过使用 flex 属性、表格属性，但没有任何效果。

另外，修改引导类的 css 对我来说是个好习惯吗？这不可能破坏整个框架吗？

TLDR：在引导程序中声明 div 高度的最佳方法是什么？

例如，如何让两个“你好”的 div 在同一行中占据相同的高度？

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Coffeedev Data Dashboard</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.6/css/bootstrap.min.css">
		<style> body { padding-top: 70px;} .col-md-9{height: 100%}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
		<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	</head>

	<body>
   		<!-- Fixed navbar -->
	    <nav class="navbar navbar-default navbar-fixed-top">
	      <div class="container-fluid">
		    <div class="navbar-header">
		      <a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
		    </div>
	        <div id="navbar" class="navbar-collapse collapse">
	          <ul class="nav navbar-nav">
	            <li class="active"><a href="#">Home</a></li>
	            <li><a href="#plot">Plot</a></li>
	          </ul>
	        </div>
	      </div>
	    </nav>

	    <!-- Main Container -->
	    <div class="container-fluid ">
	    	<div class="row">
	    		<div class="col-md-3">
	    				<div class="alert alert-success" role="alert">
	    					<h3> Hello there!</h3>
		    				<br>
		    				<br>
		    				<br>
		    				<br>
	    				</div>

	    		</div>
	    		<div class="col-md-9">
	    				<div class="alert alert-success" role="alert">
	    					<h3> Hello there!</h3>
	    				</div>
	    		</div>

	    	</div>
	    	<div class="row">
	    		<div class="col-md-12">
	    			Hi there!
	    		</div>
	    	</div>

	    </div>

	</body>

</html>

编辑：尝试使用 .row-eq-height。还是没有运气。

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Coffeedev Data Dashboard</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.6/css/bootstrap.min.css">
		<style> body { padding-top: 70px;}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
		<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	</head>

	<body>
   		<!-- Fixed navbar -->
	    <nav class="navbar navbar-default navbar-fixed-top">
	      <div class="container-fluid">
		    <div class="navbar-header">
		      <a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
		    </div>
	        <div id="navbar" class="navbar-collapse collapse">
	          <ul class="nav navbar-nav">
	            <li class="active"><a href="#">Home</a></li>
	            <li><a href="#plot">Plot</a></li>
	          </ul>
	        </div>
	      </div>
	    </nav>

	    <!-- Main Container -->
	    <div class="container-fluid ">
	    	<div class="row row-eq-height">
	    		<div class="col-md-3" style="background-color: red">
					Hello!
					<br>
					<br>
					<br>
	    		</div>
	    		<div class="col-md-9" style="background-color: red">
	    			Hello!
	    		</div>
	    	</div>
	    </div>

	</body>

</html>

【问题讨论】：

SO 和 Bootstrap Equal-Height Columns Experiment 上已经准备好了许多答案。另见stackoverflow.com/questions/19695784/…
您不应该修改引导类的 css。您应该创建自己的 css 文件并覆盖其中的类的属性

标签： html twitter-bootstrap css flexbox

【解决方案1】：

如果你只是想控制高度，你可以在自己的 css 中指定高度；

#myCustomDivId{
    height: 10em;
}

em 将缩放到屏幕大小。只是玩弄这个数字，直到它看起来像你想要的那样。

【讨论】：