gpt4 book ai didi

html - 在 Bootstrap 4 中制作类似于表格样式的网格

转载 作者:行者123 更新时间:2023-12-04 22:08:43 26 4
gpt4 key购买 nike

我正在使用 bootstrap 4 重新做一个应用程序的前端。该应用程序在某些地方使用了我希望它没有使用的表,所以我将这些表重新工作到一个 .row/.col 网格系统中。 bootstrap 中关于表格的好处是似乎有可用于表格的样式选项,但似乎没有用于行和列的样式选项。您可以在代码段中看到它会自动设置表格样式,但我如何使用网格来做到这一点?

例如:

<!DOCTYPE html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<thead class="thead-light">
<th>Thing one</th>
<th>Thing two</th>
<th>Thing Three</th>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</tbody>
</table>

<div class="container">
<div class="row">
<div class="col">
Thing one
</div>
<div class="col">
Thing two
</div>
<div class="col">
Thing three
</div>
</div>
<div class="row">
<div class="col">
One
</div>
<div class="col">
Two
</div>
<div class="col">
Three
</div>
</div>
<div class="row">
<div class="col">
Four
</div>
<div class="col">
Five
</div>
<div class="col">
Six
</div>
</div>
<div class="row">
<div class="col">
Seven
</div>
<div class="col">
Eight
</div>
<div class="col">
Nine
</div>
</div>
</div>
</body>

最佳答案

您将添加 CSS 以获得相同的样式...

.grid-striped .row:nth-of-type(odd) {
background-color: rgba(0,0,0,.05);
}

, 使用 Bootstrap 4 utilities (即: font-weight-boldbg-light 等。)但这些需要单独应用,并且不会像上面的 CSS 那样自动交替奇数行。

演示: https://www.codeply.com/go/IDBemcEAyL

还要记住 table columns can use the grid

关于html - 在 Bootstrap 4 中制作类似于表格样式的网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48909301/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com