在 Bootstrap 4 中制作类似于表格样式的网格答案

【问题标题】：Making grid like table styles in Bootstrap 4在 Bootstrap 4 中制作类似于表格样式的网格
【发布时间】：2018-08-01 05:37:23
【问题描述】：

我正在使用 bootstrap 4 重新构建应用程序的前端。该应用程序在某些地方使用了我希望它没有使用的表格，因此我将这些表格重新加工为 .row/.col 网格系统. bootstrap 中关于表格的好处是似乎有可用于表格的样式选项，但似乎没有用于行和列的样式选项。您可以在 sn-p 中看到它会自动为表格设置样式，但是如何使用网格来做到这一点？

例如：

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

【问题讨论】：

如果你想让你的 div 的样式像一个表格 - 使用一个表格。将表格用于预期目的并没有错。
如果是表格数据，为什么不直接使用表格呢？否则，由于在适当的列中没有数据，您将无法访问它
我在表格响应和做傻事方面遇到问题，所以我认为切换到网格会更容易。
另外，我喜欢将内容放在小部件样式块中的想法，而卡片不适用于表格。

标签： html css twitter-bootstrap bootstrap-4

【解决方案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。

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

还要记住table columns can use the grid

【讨论】：