如何在 Bootstrap 5 中合并 2 个 DIV 表行答案

【问题标题】：How can I merge 2 DIV table rows in Bootstrap 5如何在 Bootstrap 5 中合并 2 个 DIV 表行
【发布时间】：2021-09-13 07:36:08
【问题描述】：

在下面的 sn-p 中，我有 2 行 6 个单元格，但我需要合并单元格编号“2”和“5”。

如果将其作为 CSS 表 DIV 执行，我知道可以这样做，但我喜欢使用“引导方式”（如果存在的话），但找不到任何我能够获得的文档上班。

有谁知道如何做到这一点？

DIV：（请注意，需要在展开视图中看到 sn-p 才能使单元格以正确的方式显示）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>1</h1>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>2</h1>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>3</h1>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>4</h1>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>5</h1>
    </div>
  </div>
  <div class="col">
    <div class="card h-100" style="text-align: center">
      <h1>6</h1>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-5 bootstrap-grid

【解决方案1】：

你可以像这样使用嵌套...

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="row">
            <div class="col-12">
                <div class="card h-100 border" style="text-align: center">
                    <h1>1</h1>
                </div>
            </div>
            <div class="col-12">
                <div class="card h-100 border" style="text-align: center">
                    <h1>4</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="row h-100 ">
            <div class="col-12">
                <div class="card h-100 border" style="text-align: center">
                    <h1>2 + 5</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="row">
            <div class="col-12">
                <div class="card h-100 border" style="text-align: center">
                    <h1>3</h1>
                </div>
            </div>
            <div class="col-12">
                <div class="card h-100 border" style="text-align: center">
                    <h1>6</h1>
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/p/6we5uiXzxl

【讨论】：

【解决方案2】：

不幸的是，仅使用 Bootstrap 5 方法无法解决此问题。您可以使用table 使其工作，正如您在上面所写的。或者这里有一些混合Bootstrap 5 +显示网格的方式。

这里我们使用d-grid - 新的 BS5 类，以及 gap-2 作为网格间隙 BS5 支持。目前，d-grid 在 Bootstrap 5 文档the only example of d-grid from BS5 docs 中的描述很差。

请注意，custuom-grid 和 custuom-grid-cell 是完全自定义的类，不属于 BS5。

也很有用：grid-template-columns 和 grid-area 手册。在下面的示例中使用它们。

.custuom-grid {
  grid-template-columns: 1fr 1fr 1fr;
}
.custuom-grid-cell:nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<div class="d-grid gap-2 custuom-grid">
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>1</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>2</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>3</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>4</h1>
    </div>
  </div>
  <div class="custuom-grid-cell">
    <div class="card h-100 text-center">
      <h1>6</h1>
    </div>
  </div>
</div>

【讨论】：