不能居中的罪魁禍首是 col-sm-* 的 float: left 樣式，因為對于 col-sm-* 而言，只要屏幕寬度不小于 @screen-sm-min 就不會折行，所以可以考慮不使用 float: left 而是用 display: table-cell 來實現對齊，這樣就能比較好的解決居中問題了。不過問題是不支持這種 display 的瀏覽器就會出問題，你可以考慮用 CSS hack 來 fallback，舍棄居中對齊來保持柵格系統正常工作。

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>測試文字</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推出的一個開源的用于前端開發的工具包，是一個CSS/HTML框架。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。