【7】瞭解Bootstrap柵格系統基礎案例（2）

ps.這一次要說的是“”，但是不知道為什麼中文官網沒有給出翻譯，但是在看到案例的時候，感覺這就像一個bug，我自己姑且叫這個是一個高度bug吧，方便自己，要是大家有其他好的說法，請告訴我。

=================================================================================================

Responsive column resets就是在某些閾值時，某些列可能會出現比別的列高的情況。這個情況可能不是你所要的，建議使用.clearfix（清理浮動）和響應式工具classe的組合，

清理浮動就不說了，有一定基礎的都應該清楚了，至於響應式工具classe以後會說到（可以去中文官網看看），這裡就是讓大家知道有這麼一個高度bug的情況。

=================================================================================================

直接貼代碼

                        Bootstrap-Template-04                             Responsive column resets我自己叫這個是高度bug  .col-xs-6 .col-sm-3內容要多多---內容要多多---內容要多多---內容要多多---內容要多多---內容要多多  .col-xs-6 .col-sm-3  .col-xs-6 .col-sm-3  .col-xs-6 .col-sm-3                

首頁我們先看看這個在大屏sm方案下的（sm方案是3+3+3+3=12，正好一行）

從這個圖上我們一眼就看到最前面的內容太多，把高度撐起來了，那在xs方案下的效果怎麼樣（xs方案是6+6=12一行，一共有2行）

第一種效果：

第二種效果

通過拉縮瀏覽器，我們看到了2種效果，但是沒有一種是我們所要的效果，這時候，你是不是感覺出bug了啊，我想也是，官網給出了一種解決方案（使用.clearfix（清理浮動）和響應式工具classe的組合）

下面我們就來看看修改後的代碼（我只貼出主要是地方）

  .col-xs-6 .col-sm-3內容要多多---內容要多多---內容要多多---內容要多多---內容要多多---內容要多多  .col-xs-6 .col-sm-3      .col-xs-6 .col-sm-3  .col-xs-6 .col-sm-3

這時候我們來看看效果吧

這下正好是xs的方案的樣子了，哈哈。