如何在 Bootstrap 5 中合并 2 DIV table 行

Question

在下面的代码片段中，我有 2 行 6 个单元格，但我需要合并单元格编号“2”和“5”。

如果以 CSS Table DIV 的方式进行，我知道可以这样做，但我喜欢以“Bootstrap 方式”（如果有的话）这样的存在），但无法找到我能够开始工作的任何文档。

有人知道如何做到这一点吗？

DIV:（请注意，需要在展开视图中查看代码段，以便单元格以正确的方式显示)

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

Answer 1

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

这里我们使用 d-grid - 新的 BS5 class 和 gap-2 作为网格间隙 BS5 支持。目前 d-grid 在 Bootstrap 5 文档 the only example of d-grid from BS5 docs.

中的描述很差

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

也很有用：grid-template-columns and 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>

Answer 2

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

<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

如何在 Bootstrap 5 中合并 2 DIV table 行

How can I merge 2 DIV table rows in Bootstrap 5

html

css

twitter-bootstrap

bootstrap-grid

bootstrap-5