如何在 Bootstrap 5 中制作响应式网格 UI？答案

【问题标题】：How to make responsive grid UI in Bootstrap 5?如何在 Bootstrap 5 中制作响应式网格 UI？
【发布时间】：2021-10-08 14:16:37
【问题描述】：

我正在尝试使用以下代码，但没有成功：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"><img src="image link"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">11</div>
  </div>
</div>

使用我的代码得到如下所示： https://i.stack.imgur.com/41tKT.png

我怎样才能使这个设计看起来像这样？ https://i.stack.imgur.com/JFQZs.png

【问题讨论】：

在 boostrap 中还没有选项可以让元素跨越网格或列:(
正如@G-Cyrillus 所说，bootstrap 还没有这个选项，但我确信他们正计划使用类添加网格布局。你也可以用网格来做。它更容易。
据说他们正在努力解决这个问题，并计划发布 v5.1 (twbs-bootstrap.netlify.app/docs/5.0/layout/css-grid)。因此，您可以等待，也可以手动进行。
顺便说一句，Bootstrap 5 中没有col-xs-6

标签： html css bootstrap-5

【解决方案1】：

Bootstrap 5.1 已发布，带有一个实验性的 CSS grid 选项。这将更容易实现所需的布局...

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

/* for first block to span 2 rows */
.g-row-2 {
    grid-row: 1 / 3;
    min-height: 200px;
}

Bootstrap 5 CSS Grid

【讨论】：