不能居中的罪魁禍?zhǔn)资?nbsp;col-sm-* 的 float: left 樣式，因?yàn)閷?duì)于 col-sm-* 而言，只要屏幕寬度不小于 @screen-sm-min 就不會(huì)折行，所以可以考慮不使用 float: left 而是用 display: table-cell 來實(shí)現(xiàn)對(duì)齊，這樣就能比較好的解決居中問題了。不過問題是不支持這種 display 的瀏覽器就會(huì)出問題，你可以考慮用 CSS hack 來 fallback，舍棄居中對(duì)齊來保持柵格系統(tǒng)正常工作。

HTML：

<div class="row text-center vertical-middle-sm">  <div class="col-sm-4"><img src="photo.jpg" alt="..." class="img-circle"></div><div class="col-sm-8 text-left"><p>測(cè)試文字</p></div></div>

LESS：

@media (min-width: @screen-sm-min) {  .vertical-middle-sm {    display: table;> div {      display: table-cell;      height: 100%;      min-height: 100%;      float: none !important;}}}

拓展資料

Bootstrap是Twitter推出的一個(gè)開源的用于前端開發(fā)的工具包，是一個(gè)CSS/HTML框架。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項(xiàng)目。