css - 如何使用 Bootstrap 在设备宽度(响应式设计)上交换网格布局？

Question

我最近开始使用 bootstrap 进行开发，但我正在为一些可能非常基础的事情而苦苦挣扎。

我正在开发一个在线商店，在我们的主页上我们将展示 8 种不同的产品类型。使用网格系统，我将产品设置如下:

Grid view

按照我的理解，我有 12 个宽度的网格点，所以我做了 4x3。然后我将我想要的信息嵌套在每个产品框中(使用 .row-fluid)所以每个产品盒子都有一个 12、6、6 的格子。

但是，当我将浏览器宽度更改为移动设备时，我只需要每行 1 个产品(我已经有了)，并且我想要一个不同的嵌套网格布局。

mobile grid view

如何根据屏幕宽度设置两种不同的嵌套布局？现在，它切换到每个产品 1 行，但保留 12、6 6 网格，当只有 1 行时看起来很糟糕

Answer 1

您想利用针对不同屏幕尺寸的 Bootstrap 预定义列类，您可以在其中执行以下操作:

  <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-* 列来决定您的产品网格布局。稍微尝试一下，让它适用于您自己的布局。

此外，如果您还没有阅读过媒体查询，这将允许您根据屏幕大小更改样式表，并且您还需要研究“使用 Bootstrap 的推拉技术以提供帮助”如有必要，您可以重新排序列。

首先尝试针对移动设备进行开发始终是一个好主意，因为您将减少回溯并使您的 css 代码更轻。如果您有更具体的问题，请将其张贴在这里，因为它是一个很好的资源。