學習bootstrap過程中遇到的問題及總結

**一.柵格系統**

（1）「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。

（2）通過「行（row）」在水平方向建立一組「列（column）」。

（3）你的內容應當放置於「列（column）」內，並且，只有「列（column）」可以作為行（row）」的直接子元素。

類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速建立柵格布局。bootstrap 原始碼中定義的 mixin 也可以用來建立語義化的布局。

（4）通過為「列（column）」設定 padding 屬性，從而建立列與列之間的間隔（gutter）。通過為 .row 元素設定負值 margin 從而抵消掉為 .container 元素設定的 padding，也就間接為「行（row）」所包含的「列（column）」抵消掉了padding。

（5）負值的 margin就是下面的示例為什麼是向外突出的原因。在柵格列中的內容排成一行。

柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4 來建立。

（6）如果一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被作為乙個整體另起一行排列。

（7）柵格類適用於與螢幕寬度大於或等於分界點大小的裝置，並且針對小螢幕裝置覆蓋柵格類。因此，在元素上應用任何 .col-md-* 柵格類適用於與螢幕寬度大於或等於分界點大小的裝置，並且針對小螢幕裝置覆蓋柵格類。因此，在元素上應用任何 .col-lg-* 不存在，也影響大螢幕裝置。

1.**查詢

/* 小螢幕（平板，大於等於 768px） */

@media (min-width: @screen-sm-min)

/* 中等螢幕（桌面顯示器，大於等於 992px） */

@media (min-width: @screen-md-min)

/* 大螢幕（大桌面顯示器，大於等於 1200px） */

@media (min-width: @screen-lg-min)

2.流式布局容器

將最外面的布局元素 .container 修改為 .container-fluid，就可以將固定寬度的柵格布局轉換為 100% 寬度的布局。

3.響應式列重置

在某些閾值時，某些列可能會出現比別的列高的情況。為了克服這一問題，建議聯合使用 .clearfix 和響應式工具類。