我正在使用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>
答案 0 :(得分：1)
你要添加CSS来获得相同的样式......
.grid-striped .row:nth-of-type(odd) {
background-color: rgba(0,0,0,.05);
}
或，请使用Bootstrap 4 utilities（即：font-weight-bold，bg-light等等。）但这些需要单独应用，不会自动交替奇怪的行，如上面的CSS。