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

【问题标题】：how to make 6 images on one row go into 3 images on 2 row on a smaller screen如何在较小的屏幕上将一行 6 个图像变成 2 行 3 个图像
【发布时间】：2014-12-08 01:53:50
【问题描述】：

我有 6 个用于电子邮件页脚的社交媒体图标。是否有可能使这个对手机做出响应，以便社交媒体图标连续从 6 个变为 3 个？

我尝试使用引导程序同时使用 div 和表格，但两者都显示不正确。我更喜欢表格，因为它们与 Outlook 电子邮件一起使用。

引导代码：

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

【问题讨论】：

你应该重构你的问题，这不是一个真正的引导问题......
您是否尝试过直接使用 style 属性设置元素的样式？例如

标签： css twitter-bootstrap responsive-design grid html-email

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

【讨论】：

我也试过这个，但它不起作用。 Outlook 不响应 Divs
不是 100% 确定，因为它每行显示一个图像。我现在正在尝试使用而不是 div。
我错过了您将其用于电子邮件而不是网站。 Bootstrap，不能很好地与 Outlook 配合使用。
您可以编写一个内联媒体查询来处理这个问题。类似于jsfiddle.net/13gppfuz
是的，我也有媒体查询，但你如何将它内联？因为如果它在头脑中，那么电子邮件会将其删除。

【解决方案2】：

这样的东西对你有用吗？

例如；这使用媒体查询，因此当设备宽度低于某个大小时，它会将任何 640px 宽度调整为 320px，然后应用“wrap”（wr）和“float”（fl）类来包装彼此下方的列。

如果您将 HTML 粘贴到 Firefox 的 Chrome 中并调整窗口大小，您可以看到它是如何工作的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>none</title>
<style type="text/css">
@media only screen and (max-width: 580px){ 
    *[class].wr{ display:block !important; }
    *[class].fl{ float:left !important; }
    *[class].w320{ width:320px !important; }
</style>
</head>

<body style="padding:0px; margin:0PX;" bgcolor="#DEDEDE">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#DEDEDE"  style="table-layout:fixed; margin:0 auto;">
<tr>
<td width="100%" align="center" valign="top" bgcolor="#DEDEDE">
<!--Table to wrap email-->
<!--Table with images in-->
<table width="640" border="0" cellpadding="0" cellspacing="0" class="w320">
<tr class="wr">
<!--Top row-->
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ffcc00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ccff00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#00ffcc"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End top row-->
<!--Bottom row-->
<td class="fl wr">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#3377ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ff3377"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#7733ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End bottom row-->
</tr>
</table>
<!--End table with images in-->
<!--End of table to wrap email-->
</td>
</tr>
</table>
</body>
</html>

注意：这适用于 iPhone、Android 2.3 和 4.2。 Android 4.4 kitkat 中出现问题，但有一个解决方法。

【讨论】：

【解决方案3】：

做到这一点的方法可以在任何地方工作（outlook 和所有包含的 android 都带有浮动表：

CSS：

@media only screen and (max-width: 480px) {

    *[class*="drop"] { float:none!important; clear:both!important; width:100%!important; padding:0!important; display:block!important; }
}

HTML：

  <table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="left">
    <tr>
      <td align="left" valign="top"><!--image 1 goes in here--></td>
      <td align="left" valign="top"><!--image 2 goes in here--></td>
      <td align="left" valign="top"><!--image 3 goes in here--></td>
    </tr>
  </table>

  <!--[if mso]></td>
  <td align="left" valign="top" width="50%"><![endif]-->

  <table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="right">
    <tr>
      <td align="left" valign="top"><!--image 1 goes in here--></td>
      <td align="left" valign="top"><!--image 2 goes in here--></td>
      <td align="left" valign="top"><!--image 3 goes in here--></td>
    </tr>
  </table>

</td>

需要更改表格宽度以适合您的电子邮件宽度，使其等于其中的 50%。

您会注意到中间的注释关闭和打开 td - 这是一个 Outlook 条件，因此只有 Outlook 将有一个 td 包装每个表。

如果您的表格不需要正好是 50%（因为它们之间有填充），那么您可以忽略 Outlook 注释，只需将表格的大小调整为小于 50%，并确保 1 向左浮动并且另一个向右浮动，在它们之间留下您需要的间隙作为填充。只要这个差距超过 10px 左右，它应该可以在 Outlook 中工作。

使用此 Outlook 注释时，还要注意您的表结构。如果将其用于具有更多行的表中，您将在 Outlook 中遇到列跨度问题，因为该行在 Outlook 中有一个额外的列。在使用此 Outlook 修复程序之前，最好在 td 中嵌套一个新表。

另请注意，浮点数是使用align 属性在表格上指定的。这是为了适应无法识别 css 属性 float 的旧版 Outlook。

【讨论】：