Question

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

Answer 1

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

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

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

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

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

从语义上来说，通过你的例子，似乎并不是你使用表格的真正原因;这只是一个清单。把它放在桌子上只会让你不必要地产生反应性头痛。如果我是你，我会使用<ul>列表并从那里设置样式。

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

1 个答案: