Bootstrap的grid viewrow和col是使用flex-box实现的，它确实支持bootstrap的断点系统，react-bootstrap也支持断点系统。（除非你说的是display: grid，Bootstrap不支持所有相关的css属性）
例如，col-sm-6将col-6应用于sm或更大的大小。考虑具有col-12 col-sm-6 col-md-2断点的div：对于size >= md的大小，将应用col-2，对于sm <= size < md的大小，将应用col-6，对于size < sm的大小，将应用col-12。
在react-bootstrap响应网格中，它们是这样写的：

<Row>
    <Col xs={12} sm={6} md={2}>
        1
    </Col>
    <Col xs={12} sm={6} md={2}>
        2
    </Col>
    ...
</Row>

字符串
与原生Bootstrap相同：

<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>

型