Question

我正在学习自助训练，并且正在努力奋斗。我知道bootstrap中的默认行高是能够包含子元素（即列）的任何高度。但是，列的默认高度是占用最小空间量。

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

我觉得我已经尝试了一切，但没有运气。我尝试使用flex属性，表属性，但没有任何工作。

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

TLDR：在bootstrap中声明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>

Answer 1

如果你只是用魔杖来控制高度，你可以在自己的css中指定高度，如;

#myCustomDivId{
    height: 10em;
}

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

如何强制列div与其行的高度相同？

1 个答案: