如何设置 Bootstrap 表响应式移动布局答案

【问题标题】：How to setup Bootstrap table responsive mobile layout如何设置 Bootstrap 表响应式移动布局
【发布时间】：2017-09-13 12:39:41
【问题描述】：

使用 Bootstrap 4alpha。

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

在移动 (sm) 视图中，我希望单元格位于一列中。也许在平板电脑 (md) 视图中，我可能需要两列。

我可以使用哪些类来完成此任务，或者我会更聪明地重新开始使用引导行和列而不是表？

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

【问题讨论】：

你使用 bootstrap，我相信你可以在他们的网页上获得关于如何制作它的大量信息
在您的场景中使用引导行和列而不是表格，这样会更容易和流畅

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

据我所知，Bootstrap 4 中没有针对此的特定于表格的构造，但本质上您只是希望表格单元格在狭窄的视口上变成块元素。您可以使用 Bootstrap 4 beta 的 responsive display utility classes 设置显示属性覆盖，但这可能会变得混乱，因为它是移动优先的，您需要更正中等视口以上的覆盖。

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

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

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

CSS Tricks 对响应式表格有一些好的想法。

尽管从语义上讲，对于您的示例，您使用表格似乎并不是真正的原因；这实际上只是一个列表。把它放在桌子上只会让你不必要地感到头痛。如果我是你，我会使用 <ul> 列表并从那里设置样式。

【讨论】：