Question

.row {background-color:lavender}

.col1{
	margin:3px;
	min-height:300px;
	text-align:center;
	background-color:silver;
}

.col2{
	margin:3px;
	min-height:300px;
	text-align:center;
	background-color:#faebd7;
}

.col3{
	margin:3px;
	min-height:300px;
	text-align:center;
	background-color:skyblue;
}

我有一个问题。当我在中心列中添加标题时，Bootstrap似乎增加了保证金（请参阅screenshot）。这是默认行为吗？我已经包含了CSS和HTML。如果我只添加文本边距不会移动的内容，所以也许它会增加保证金到标题元素？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="stylesheet.css" rel="stylesheet"> 

  </head>
  <body>
    
	<div class="container">
	
	  <div class="row">
	  
	  <div class="col-md-3">
	     <div class="col1">column 1</div>
	  </div>
	  <div class="col-md-6">
	     <div class="col2"><h2> Column 2 <small> Secondary text </small> </h2></div>
	  </div>
	  <div class="col-md-3">
	     <div class="col3">column 3</div>
	  </div>
	    </div>
	 
	  </div>
	   
	</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

我还没有运行此代码，但我的猜测是h2元素的边距。

Bootstrap为元素添加边距

1 个答案: