如何使用Bootstrap在設備寬度上交換網格布局（響應設計）？

Question

我最近開始使用bootstrap進行開發，但是我正在嘗試一些可能很基礎的東西。

我正在開發一家網上商店，在我們的主頁上，我們將顯示8種不同的產品類型。 使用網格系統，我像這樣設置產品：

網格視圖

據我了解，我的寬度為12個網格點，所以我做了4x3。 然后，我將所需的信息嵌套在每個產品盒中（使用.row-fluid），因此每個產品盒具有12、6 6網格。

但是，當我將瀏覽器的寬度更改為移動設備時，我只希望每行有一個產品（我已經擁有），並且我想要一個不同的嵌套網格布局。

移動網格視圖

如何根據屏幕寬度設置兩種不同的嵌套布局？ 現在，每個產品切換到1行，但保持12、6 6網格，當只有1行時，這看起來很糟糕

Answer 1

您想利用引導程序預定義的列類來定位不同的屏幕尺寸，您可以在其中執行以下操作：

  <div class="row">
  <div class="col-xs-9 col-sm-6 col-lg-6">product name</div>     
  <div class="col-xs-9 col-sm-6 col-lg-6">description</div>
  <div class="col-xs-3 col-sm-12 col-lg-12">image</div>
  </div>

在上面，您將很可能通過定義col-xs- *和col-sm- *列來確定產品網格布局。 試一試，使其適合您自己的布局。

另外，如果您還沒有想要閱讀的媒體查詢，可以根據屏幕尺寸更改樣式表，還可以參考“帶有引導程序的推拉技術”來幫助您重新排序列（如果需要）。

最好先嘗試針對移動設備進行開發，因為這樣可以減少回溯並簡化CSS代碼，這是一個好主意。 如果您有更具體的問題，請在此處發布，因為這是一個很好的資源。