「水平在任何時候」是什麼意思？

Question

新的Bootstrap三個文檔explains the grid behaviour爲「適用於所有時間水平」的超小型設備。這是什麼意思？當然，在一個小型設備上，所有的柱子都會垂直疊放在一起？我在這裏失敗的是我（缺乏）對網格是什麼的理解。

我來自非設計者的角度，並試圖將許多產品迭代到響應式網格中。每行內的列數將根據是否顯示奇數或偶數產品而改變。 < - Bootstrap和動態頁面上的靜態內容似乎很簡單。例如，我們是否必須插入空的<div class="col-xs*"></div>以使其達到12？

Answer 1

什麼「水平在任何時候」意味着沒有哪個斷點將col-xs- *從浮動變爲堆疊。例如：

<div class="col-xs-6"></div> 
<div class="col-xs-6"></div> 

在這個例子中，總是會有大小相等的兩列，無論你是手機，平板電腦或桌面上。對於對比：

<div class="col-sm-6"></div> 
<div class="col-sm-6"></div> 

在這個例子中，列將被堆疊，直到設備的視口是> = 768，在該點，將切換到相同大小的兩列。

你可能會問自己的問題是「爲什麼所有這些變化？」那麼，這些選項給我們的是能夠自定義各種設備上的佈局，而無需在CSS中弄髒我們的手。例如，如果我想在手機上兩個相等列，但是75/25分體式平板電腦和了，我會做到以下幾點：

<div class="col-xs-6 col-sm-8"></div> 
<div class="col-xs-6 col-sm-4"></div> 

如果你想堆放在手機，就等於平板電腦，和75/25在桌面上，然後做到這一點：

<div class="col-sm-6 col-md-8"></div> 
<div class="col-sm-6 col-md-4"></div> 

因爲你沒有明確指定的電話一格，它會恢復到堆疊。

爲了獲得堅實的感覺，將一些簡單的網格放在一起，然後開始調整瀏覽器大小。你應該能夠看到它比文檔本身更容易改變。

編輯

思考另外一個例子可能感興趣的：在兩個手機和平板電腦兩個相等的列，然後75/25和桌面。代碼：

<div class="col-xs-6 col-md-8"></div> 
<div class="col-xs-6 col-md-4"></div> 

這實際上是「水平在任何時候」的一個很好的例證。因爲我們沒有指定col-sm，所以col-xs會繼續執行，直到我們觸及桌面斷點，該斷點設置爲> = 992。