Boostrap缩进列中的行

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 and .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不会更改，因为在.header和.footer上应用了background-color属性，颜色为应用包括填充。

在(footer and header) divs中包含这些元素.col-sm-12会将填充添加到父元素。