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

Question

在下面的代码段中，我在2行中有6个单元格，但我需要合并单元格编号"2〃；以及"；5〃；。

如果把它作为CSS表DIV来做，我知道这是可以做到的，但我喜欢用"；引导方式"；(如果存在的话(，但找不到任何我能够上班的文件。

谁知道这是怎么做到的？

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

您可以使用这样的嵌套。。。

<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

Answer 2

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

这里我们使用d-grid-新的BS5类，并使用gap-2作为网格间隙BS5支持。目前，在Bootstrap 5文档中对d-grid的描述很差，这是BS5文档中d网格的唯一示例。

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

还可以使用：网格模板列和网格区域手册。在下面的例子中使用了它们。

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