本篇主要包括：
添加獨立的一行
在id為body的section和id為main的section之間，添加2張圖片。
我們發現，新加的2張圖片把主體內容擠到了右側。
那么，我們如何處理新加的2張圖片呢？
--我們不太可能用container，因為它是頁面布局層面的類名。但我們可以把這2張圖片放在class名為row的div中。
我們還可以加更多的圖片。
現在的圖片還沒有居中。考慮到總共有12個單元格，而4張圖片只占了8個單元格，還空出4個單元格。於是，我們可以讓第一張圖片向右偏移2個單元格。
文字環繞
為img元素增加一個class="pull-left"屬性，這會讓圖片靠左，文字環繞。
但是，當我們把頁面寬度縮小到很小的尺寸，發現圖片需要拖拽水平滾動條才可以看到全貌。有沒有辦法讓圖片自適應呢？
圖片自適應
我們為某個圖片增加一個名稱為img-thumbnail的class。
我們看到：添加img-thumbnail后，不僅為圖片加了一個邊框，並且，當頁面尺寸變得再小，我們總能看到圖片全貌，而不需要拖拽水平滾動條。
隱藏元素
有時候，當頁面寬度小於或大於某個尺寸，我們希望隱藏一些元素。在有4個圖片的行添加一個名為hidden-xs的class。
意思是：當頁面寬度小於768像素的時候，隱藏圖片行。
我們把頁面寬度調到768像素以下，圖片行果然被隱藏了。
同理，我們也可以為圖片行加上visible-md, visible-lg,分別表示當寬度大於992像素和1200像素時顯示圖片行。
參考資料：WilderMinds
“Bootstrap 3之美”系列類包括: