如何解决如何在 Bootstrap 5 中合并 2 个 DIV 表行
在下面的代码段中,我有 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>
解决方法
您可以像这样使用嵌套...
<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 方法来解决此问题。如上所述,您可以使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。