css - 如何在较小的屏幕上将一行 6 个图像变成 2 行 3 个图像

Question

我有 6 个社交媒体图标作为电子邮件的页脚。是否有可能使它对手机具有响应性，以便社交媒体图标在一行中从 6 个变为 3 个？

我尝试将 div 和表格与 bootstrap 一起使用，但两者都显示不正确。我更喜欢表格，因为它们可以与 Outlook 电子邮件一起使用。

Bootstrap 代码:

<td class="col-xs-4 col-sm-4  col-md-2">

Answer 1

您可以将每组 3 个图标放入单独的列中，这些列堆叠在 xs 上。

<div class="col-xs-12 col-md-6>...Three icons go here....</div>
<div class="col-xs-12 col-md-6>...Three icons go here....</div>

编辑:因为这是针对 Outlook 的，所以 Bootstrap 不能很好地使用它。更多信息可以在这里找到:Has anyone gotten HTML emails working with Twitter Bootstrap?