如何设置引导表响应移动布局

Question

使用bootstrap 4alpha。

我有一个列出公司服务的表。

在移动（SM）视图中，我希望单元格落入一个列中。也许在平板电脑（MD）视图中，我可能想要两个列。

我可以使用哪些类来完成此操作，或者我会更聪明地使用bootstrap行和列而不是表？

？

<table class="table table-sm" style="border-top:2px solid #777;" >
<tbody>
    <tr style="border:0;">
      <td style="border:2px solid #fff;">Truck Tarps</td>
      <td style="border:2px solid #fff;">Taut Liner Curtains</td>
      <td style="border:2px solid #fff;">Roll Tops</td>
      <td style="border:2px solid #fff;">Cap Tarps</td>
    </tr>
    <tr style="border:0;">
      <td style="border:2px solid #fff;">Load Resistant Curtains</td>
      <td style="border:2px solid #fff;">Custom Covers</td>
      <td style="border:2px solid #fff;">Heavy Duty Canvas Canopy</td>
      <td style="border:2px solid #fff;">Tarp Repairs / Onsite Repairs</td>
    </tr>
</tbody>
</table>

Answer 1

据我所知，Bootstrap 4中没有表特定的构造，但是本质上，您只希望表单元格在狭窄的视口上变成块元素。您可以使用Bootstrap 4 Beta的响应式显示实用程序类设置Display属性覆盖，但这可能会凌乱，因为它是移动设备先进的，您需要纠正中型视口的覆盖。

更容易在您自己的媒体查询中输入自定义CSS，例如

@media all and (max-width: [your-breakpoint]) {
  table, tr, td {
    display: block !important;
  }
}

您也可以在th元素上使用特定样式，并在tr元素中添加间距，以使您的表格在堆叠时看起来更清晰。

CSS技巧对响应表有一些很好的想法。

语义上，有了您的示例，似乎并不是您使用表的真正原因。这实际上只是一个列表。将其放入桌子中只是会使您不必要的头痛。如果我是您，您将使用<ul>列表并从那里进行样式。