ブーストラップの列をインデントする

Question

私はブートストラップが初めてです。 3列（col-sm-3、col-sm-6およびcol-sm-3）の2番目の行がインデントされているのはなぜですか？他の2つの行の幅は広がります。どのようにすべての行を同じ幅にすることができますか？

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

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

Answer 1

.col-sm-3 and .col-md-6はdiv要素にパディングを追加しますので。

ラップCOL-SM-12

<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クラス.header.footerへとdiv要素を追加する

HTMLのヘッダーとフッター.headerおよび.footerに適用され、パディングを含む色が適用される。

(footer and header) divsを.col-sm-12に配置すると、親要素にパディングが追加されます。