基础文本网格

【问题标题】：Foundation Text Grid基础文本网格
【发布时间】：2015-03-25 11:42:42
【问题描述】：

我正在尝试创建一个包含文本而非图像的网格，类似于 Zurb 模板中的“内容部分”：http://foundation.zurb.com/templates/orbit.html

我想在每一行上创建三个文本块。

我能够创建这个，但出现的问题是，有时在我的数据中，一行只有一两个文本块。

例如，如果产品缺少它的位置，有没有办法移动成分来代替位置，或者如果缺少类别和位置来将成分移动到类别位置？

我正在使用 Ruby on Rails 和 Foundation 5。

谢谢！

  <div class="row">
    <div class="large-4 columns">
      <% unless @product.category.nil? %>
      <div class="product-heading">Product Category</div>
      <div class="product-value">
        <%= @product.category %>
      </div>
      <% end %>
    </div>

    <div class="large-4 columns">
      <% unless @product.location.nil? %>
      <div class="product-heading">Product Location</div>
      <div class="product-value">
        <%= @product.location.sort.join(", ") %>
      </div>
      <% end %>
    </div>

    <div class="large-4 columns">
      <% unless @product.ingredients.nil? %>
      <div class="product-heading">Product Ingredients</div>
      <div class="product-value">
        <%= @product.ingredients.sort.join(", ") %>
      </div>
      <% end %>
    </div>
  </div>

根据 Max Williams 的建议生成的 HTML。

  <div class="row">
    <div class="large-4 columns">
      <div class="product-heading">Product Category</div>
      <div class="product-value">Food </div>
    </div>
    <div class="large-4 columns">
      <div class="product-heading">Product Ingredients</div>
      <div class="product-value">Flour, Sugar </div>
    </div>
  </div>

Javascript 尝试删除空的 li 标签

<script>$('li, p')
  .filter(function() {
    return $.trim($(this).text()) === '' && $(this).children().length == 0
  })
  .remove();
</script>

【问题讨论】：

• 我认为这很容易解决，但您没有提供任何有关您的实际 Rails 代码、模型等的详细信息。例如，您是否在此处迭代对象集合？您应该包括相关的 erb 代码以及呈现的 html。
• @MaxWilliams 我已经更新了代码。我是新手，但我希望我已经为您提供了足够的信息。谢谢。
• 你能改用block-grid吗？ codeply.com/go/iouWc9rtUy
• @Skelly 感谢代码示例。我试过使用块网格，但是当一个块丢失时，块不会移动。 HTML 显示有一个空的
• 标记。如果我通过网络检查器删除它，那么一切正常。我尝试使用 javascript 删除空的
• 标记，但它不起作用。有什么建议吗？