-1
.row {background-color:lavender}
.col1{
\t margin:3px;
\t min-height:300px;
\t text-align:center;
\t background-color:silver;
}
.col2{
\t margin:3px;
\t min-height:300px;
\t text-align:center;
\t background-color:#faebd7;
}
.col3{
\t margin:3px;
\t min-height:300px;
\t text-align:center;
\t background-color:skyblue;
}
に余白を追加します。中央欄に見出しを入れると、ブートストラップに余裕があるようです(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">
\t <link href="stylesheet.css" rel="stylesheet">
</head>
<body>
\t <div class="container">
\t
\t <div class="row">
\t
\t <div class="col-md-3">
\t <div class="col1">column 1</div>
\t </div>
\t <div class="col-md-6">
\t <div class="col2"><h2> Column 2 <small> Secondary text </small> </h2></div>
\t </div>
\t <div class="col-md-3">
\t <div class="col3">column 3</div>
\t </div>
\t </div>
\t
\t </div>
\t
\t </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>
問題を再現できるだけのコードを含めてください。これに関する助言については、「最小、完全、および検証可能な例の作成方法」を参照してください。 –
あなたの問題を見るにもあなたのCSSを見せてください –