百分比布局+媒體查詢
首先通過媒體查詢確認container的寬度，每個col-xx-xx都是通過百分比定義的，屏幕尺寸變化了，container就變化了，col自然就變了
Bootstrap的官方解釋：Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為做多12列。
柵格系統的工作原理：
1.行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中，以便為其賦予合適的排列（aligment
）和內補（padding）。
2.通過行（row）在水平方向創建一組列（column）。
3.自己內容應當放置於列（column）內，並且，只有列可以作為行（row）的直接子元素。
4.類似.row和.col-xs-4這種預定義的類，可以用來快速創建柵格布局。Bootstrap源碼中定義的mixin也可以用來創建語義化布局。
5.通過為列設置padding屬性，從而創建列與列之間的間隔（gutter）。通過為.row元素設置負值margin從而抵消為.container元素設置的padding，也就間接為行（row）所包含的列（column）抵消掉了padding。
6.柵格系統的列是通過指定1到12的值來表示其跨越范圍。例如三個等寬的列可以使用三個.col-xs-4來創建。
7.如果一行（row）中包含了的列（column）大於12，多余的列所在的元素將作為一個整體另起一行排列。
8.柵格類適用於與屏幕寬度大於或等於分界點大小的設備，並且針對小屏幕覆蓋柵格類。
如下圖所示為柵格系統在多種屏幕上的應用說明。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
在head中引入meta標簽，添加viewpirt屬性，content中寬度等於設備寬度， initial-scale:頁面首次被顯示可見區域的縮放級別，取值1則頁面按實際尺寸顯示，無任何縮放；maximum-scale:允許用戶縮放到的最小比例；user-scalable:用戶是否可以手動縮放。