基础文本网格

Question

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

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

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

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

我在 Rails 和 Foundation 5 上使用 Ruby。

谢谢！

  <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>

HTML 根据 Max Williams 的建议生成。

  <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>

Answer 1

关键是寻找重复的元素，并将它们抽象出来，例如使用循环。例如

<% product_cells = [["Category", @product.category], ["Location", @product.location_string], ["Ingredients", @product.ingredients_string]] %>
<div class="row">
  <% product_cells.each do |title, data| %>
    <% unless data.blank? %>    
      <div class="large-4 columns">
        <div class="product-heading">Product <%= title %></div>
        <div class="product-value"><%= data %> </div>
      </div>
    <% end %>
  <% end %>
</div>

请注意，我已将测试放在不同的位置，因此如果数据为空，则会跳过整个 large-4 div。

这种东西@product.location.sort.join(", ")通常应该用Product模型中的方法代替，例如

#in Product
def location_string
  self.location.reject(&:blank?).sort.join(", ")
end

def ingredients_string
  self.ingredients.reject(&:blank?).sort.join(", ")
end

那么你可以把上面的代码改成

<% product_cells = [["Category", @product.category], ["Location", @product.location_string], ["Ingredients", @product.ingredients_string]] %>

编辑：更改字符串方法以应对 nils

EDIT2：更改了我原来的答案以使用我添加的模型方法。

基础文本网格

Foundation Text Grid

css

ruby-on-rails

zurb-foundation