Foundation 桌面上的 1 行 6 张图片和移动设备上的 2 行 3 张图片？

Question

我有 6 张正方形图像，尺寸都相同。我正在尝试使用 Foundation 来布置它们，以便在桌面上，它们在单行上，但在移动设备上，它们在 2 行，每行 3 行，但我就是想不通。这是我尝试过的：

<div class="row">
    <div class="large-12 columns">
        <div class="large-2 columns"><img src="{{ 'image1.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image2.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image3.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image4.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image5.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image6.jpg' | theme_image_url }}" /></div>
    </div>
</div>

这在桌面上可以正常工作（尽管存在一些居中问题），但在移动设备上每个图像都有自己的线条。

这就是我想要的：

桌面：

手机：

关于如何实现这一点的任何想法？

Answer 1

您不需要为每个 div 定义尺寸等级。您可以改用 Foundation 的 block grid。只需在父元素中定义尺寸类。这是实现这些类型布局的基础方式。

<ul class="small-block-grid-3 large-block-grid-6">
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
</ul>

Answer 2

你可以这样做（注意“小”类）：

<div class="row">

        <div class="large-2 small-4 columns"><img src="{{ 'image1.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image2.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image3.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image4.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image5.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image6.jpg' | theme_image_url }}" /></div>

</div>