css - Bootstrap 在行中缩进列

Question

我是 bootstrap 的新手。为什么第二行有 3 列(col-sm-3、col-sm-6 和 col-sm-3)缩进，另外两行的宽度更宽？如何使所有行的宽度相同？

.header {background-color: #9933cc;}
    .menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
	.menu li {
		background-color :#33b5e5;
		margin-bottom: 7px;
	}
	.aside {background-color: #33b5e5;}
	.footer {background-color: #0099cc;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
	<div class='row'>
		<div class='header'>
			<h1>China</h1>
		</div><!--end header-->
	</div>
	<div class='row'>
		<div class='menu col-sm-3'>
			<ul>
				<li>The Flight</li>
				<li>The City</li>
				<li>The Island</li>
				<li>The Food</li>
			</ul>
		</div><!--end menu-->
		<div class='col-sm-6'>
			<h1>The City</h1>
			<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
			<p>Resize the browser window to see how the content respond to the resizing.</p>
		</div>
		<div class='col-sm-3'>
			<div class='aside'>
				<h2>What?</h2>
				<p>Chania is a city on the island of Crete.</p>
				<h2>Where?</h2>
				<p>Crete is a Greek island in the Mediterranean Sea.</p>
				<h2>How?</h2>
				<p>You can reach Chania airport from all over Europe.</p>
			</div>
		</div>
	</div>
	<div class='row'>
		<div class='footer'>
			<p>Resize the browser window to see how the content respond to the resizing.</p>
		</div><!--end footer-->
	</div>
</div><!--end container-->

Answer 1

因为 .col-sm-3 和 .col-md-6 向 div 元素添加了填充。

将页眉和页脚包裹在 col-sm-12 中

HTML

 <div class="col-md-12">
   <div class='header'>
        <h1>China</h1>
   </div><!--end header-->
</div>

<div class="col-sm-12">
 <div class='footer'>
  <p>Resize the browser window to see how the content respond to the resizing.</p>
 </div><!--end footer-->
</div>

Working Fiddle

将 .col-sm-12 类添加到 .footer 和 .header div 不会改变，因为 background-color 属性是应用于 .header 和 .footer 并应用颜色，包括填充。

将这些元素 (页脚和页眉)div 包裹在 .col-sm-12 中，向父元素添加填充。