Boostrap在行中縮進列

我是引導程序的新手。爲什麼第3行的行（col-sm-3,col-sm-6和col-sm-3）被縮進，另外兩行的寬度更寬？我怎樣才能使所有的行寬度相同？Boostrap在行中縮進列

.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-->

來源

2017-08-06 Robert Rocha

由於.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的不改，因爲background-color屬性的頁眉和頁腳適用於.header和.footer，並應用包括填充在內的顏色。

包裝這些元素(footer and header) divs在.col-sm-12添加填充到父元素。

來源

2017-08-06 03:22:12

是的，根本沒有工作。 –

@RobertRocha檢查工作小提琴。 –

不錯！有效。我很好奇，爲什麼將這些類添加到頁眉和頁腳div標籤不起作用，爲什麼只有在使用添加了「col-sm-12」的單獨div時才能工作？如果你能向我解釋這將是美好的。 –

Boostrap在行中縮進列

回答

相關問題