基础网格系统问题答案

【问题标题】：Foundation Grid System Issue基础网格系统问题
【发布时间】：2015-11-26 10:05:32
【问题描述】：

我正在通过 Foundation 开发网站。但是我的网格系统无法正常工作。每当我将浏览器宽度调整为 1596 像素、1440 像素和 1333 像素时；网格系统无法正常工作。我把我的源代码放到

代码笔：

我得到了我的屏幕截图视频。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="google" value="notranslate">


  <title>Foundation</title>


  <link rel="stylesheet" href="//codepen.io/assets/reset/normalize.css">

  <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'>



</head>

<body>

  <div class="row">
    <div class="large-3 medium-4 small-6 columns">
      <a href="http://127.0.0.1/makine/canon-powershot-elph-310-hs/" title="Canon PowerShot Elph 310 HS">
        <img width="199" height="147" src="http://i.imgur.com/fwHd8zf.png" class="attachment-kucuk wp-post-image" alt="Canon_PowerShot_Elph_310_HS_428369_i0" />
        <h4>Canon PowerShot Elph 310 HS</h4>
      </a>
    </div>

    <div class="large-3 medium-4 small-6 columns">
      <a href="http://127.0.0.1/makine/canon-powershot-s120/" title="Canon PowerShot S120">
        <img width="280" height="250" src="http://i.imgur.com/HLuFBv0.png" class="attachment-kucuk wp-post-image" alt="Canon_PowerShot_S120_890378" />
        <h4>Canon PowerShot S120</h4>
      </a>
    </div>

    <div class="large-3 medium-4 small-6 columns">
      <a href="http://127.0.0.1/makine/canon-1d-x/" title="Canon 1D X">
        <img width="275" height="250" src="http://i.imgur.com/BlX05lN.png" class="attachment-kucuk wp-post-image" alt="Canon_EOS_1D_X_466261_i0" />
        <h4>Canon 1D X</h4>
      </a>
    </div>

    <div class="large-3 medium-4 small-6 columns">
      <a href="http://127.0.0.1/makine/canon-7d-mark2/" title="Canon 7D Mark2">
        <img width="280" height="250" src="http://i.imgur.com/DB3cfLX.png" class="attachment-kucuk wp-post-image" alt="_3962017" />
        <h4>Canon 7D Mark2</h4>
      </a>
    </div>

    <div class="large-3 medium-4 small-6 columns">
      <a href="http://127.0.0.1/makine/canon-7d/" title="Canon 7D">
        <img width="280" height="250" src="http://i.imgur.com/lOpicbY.png" class="attachment-kucuk wp-post-image" alt="Canon EOS 7D" />
        <h4>Canon 7D</h4>
      </a>
    </div>

    <div class="large-3 medium-4 small-6 columns">
      <a href="http://127.0.0.1/makine/canon-70d/" title="Canon 70D">
        <img width="280" height="250" src="http://i.imgur.com/GT0t4eo.png" class="attachment-kucuk wp-post-image" alt="Canon-eos-70-d-fotograf-makinesi" />
        <h4>Canon 70D</h4>
      </a>
    </div>

    <div class="large-3 medium-4 small-6 columns">
      <a href="http://127.0.0.1/makine/canon-6d/" title="Canon 6D">
        <img width="280" height="250" src="http://i.imgur.com/y2wRSZx.png" class="attachment-kucuk wp-post-image" alt="Canon 6D" />
        <h4>Canon 6D</h4>
      </a>
    </div>

    <div class="large-3 medium-4 small-6 columns">
      <a href="http://127.0.0.1/makine/canon-ef-50mm-f1-8-ii/" title="Canon EF 50mm f/1.8 II">
        <img width="280" height="250" src="http://i.imgur.com/5l2GjRG.png" class="attachment-kucuk wp-post-image" alt="Canon_EF_50mm_f18" />
        <h4>Canon EF 50mm f/1.8 II</h4>
      </a>
    </div>

  </div>



</body>

</html>

【问题讨论】：

不清楚在这种情况下你想要什么结果？

标签： zurb-foundation zurb-foundation-5

【解决方案1】：

我想我明白你的问题是什么......当它缩小网格时是否正确？对于这样的事情，我喜欢使用块网格，它真的很方便 - 看看http://codepen.io/brock8282/pen/ojXZMW

另外，尝试对 li 使用均衡器以使所有内容保持一致。



<div class="row">

<div class="columns large-12">
  
  <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
 
<li>
        <a href="http://127.0.0.1/makine/canon-powershot-elph-310-hs/" title="Canon PowerShot Elph 310 HS">
            <img src="http://i.imgur.com/fwHd8zf.png" class="attachment-kucuk wp-post-image" alt="Canon_PowerShot_Elph_310_HS_428369_i0">
        <h4>Canon PowerShot Elph 310 HS</h4>
        </a>
    </li>

<li>
        <a href="http://127.0.0.1/makine/canon-powershot-s120/" title="Canon PowerShot S120">
            <img  src="http://i.imgur.com/HLuFBv0.png" class="attachment-kucuk wp-post-image" alt="Canon_PowerShot_S120_890378">
            <h4>Canon PowerShot S120</h4>
        </a>
    </li>

<li>
        <a href="http://127.0.0.1/makine/canon-1d-x/" title="Canon 1D X">
            <img src="http://i.imgur.com/BlX05lN.png" class="attachment-kucuk wp-post-image" alt="Canon_EOS_1D_X_466261_i0">
            <h4>Canon 1D X</h4>
        </a>
    </li>

<li>
        <a href="http://127.0.0.1/makine/canon-7d-mark2/" title="Canon 7D Mark2">
            <img  src="http://i.imgur.com/DB3cfLX.png" class="attachment-kucuk wp-post-image" alt="_3962017">
            <h4>Canon 7D Mark2</h4>
        </a>
    </li>

<li>
        <a href="http://127.0.0.1/makine/canon-7d/" title="Canon 7D">
            <img  src="http://i.imgur.com/lOpicbY.png" class="attachment-kucuk wp-post-image" alt="Canon EOS 7D">
            <h4>Canon 7D</h4>
        </a>
    </li>

<li>
        <a href="http://127.0.0.1/makine/canon-70d/" title="Canon 70D">
            <img  src="http://i.imgur.com/GT0t4eo.png" class="attachment-kucuk wp-post-image" alt="Canon-eos-70-d-fotograf-makinesi">
            <h4>Canon 70D</h4>
        </a>
    </li>

<li>
        <a href="http://127.0.0.1/makine/canon-6d/" title="Canon 6D">
            <img  src="http://i.imgur.com/y2wRSZx.png" class="attachment-kucuk wp-post-image" alt="Canon 6D">
            <h4>Canon 6D</h4>
        </a>
    </li>

<li>
        <a href="http://127.0.0.1/makine/canon-ef-50mm-f1-8-ii/" title="Canon EF 50mm f/1.8 II">
            <img  src="http://i.imgur.com/5l2GjRG.png" class="attachment-kucuk wp-post-image" alt="Canon_EF_50mm_f18">
            <h4>Canon EF 50mm f/1.8 II</h4>
        </a>
    </li>

</ul>
  
  </div></div>

【讨论】：

谢谢。针对这个问题，我将我的 html 代码转换为引导程序。现在我将再次使用 Foundation。

【解决方案2】：

在foundation 6 blockgrid ul/li 中，您需要使用单个blockgrid + 列系统并不起作用

<div class="row small-up-1 medium-up-2 large-up-4">
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="">
  </div>
</div>

【讨论】：

【解决方案3】：

为此使用block grid 组件：

块网格为您提供了一种在其中均匀拆分列表内容的方法网格。如果您想创建一行五个图像或段落无论屏幕尺寸如何，块都需要保持均匀间隔网格是给你的。

【讨论】：