使用react-bootstrap更改断点处的网格布局

Question

我想在 React Bootstrap 中为 12 个图像创建一个网格视图。 在 md 及以上版本中，图像应排列为 6x2（顶部 6 个，底部 6 个） 对于 sm 及以上，它应该是 2x6 对于 xs 来说应该是 1x12

但是bootstrap中似乎没有这样的网格功能 并且 React Bootstrap 不提供 useBreakpoint 或类似工具来获取当前屏幕尺寸。

那么有没有一种优雅的方式来实现这一点呢？根据boostrap断点动态改变网格布局？

Answer 1

我想在 React Bootstrap 中为 12 个图像创建一个网格视图。

Bootstrap 的网格视图

row

和

col

是使用 Flex-box 实现的，它支持 bootstrap 的断点系统，这也适用于 React-Bootstrap。 （除非你说的是原生CSS

display: grid

）

例如，

col-12

将应用于所有视口大小，

col-sm-4

将应用于sm或以上的col-4。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-12 col-sm-6 col-md-2">
    1
  </div>
  <div class="col-12 col-sm-6 col-md-2">
    2
  </div>
  <div class="col-12 col-sm-6 col-md-2">
    3
  </div>
  <div class="col-12 col-sm-6 col-md-2">
    4
  </div>
  <div class="col-12 col-sm-6 col-md-2">
    5
  </div>
  <div class="col-12 col-sm-6 col-md-2">
    6
  </div>
  <div class="col-12 col-sm-6 col-md-2">
    7
  </div>
  <div class="col-12 col-sm-6 col-md-2">
    8
  </div>
  <div class="col-12 col-sm-6 col-md-2">
    9
  </div>
  <div class="col-12 col-sm-6 col-md-2">
    10
  </div>
  <div class="col-12 col-sm-6 col-md-2">
    11
  </div>
  <div class="col-12 col-sm-6 col-md-2">
    12
  </div>
</div>