Дефинирайте основна мрежа по подразбиране в Rails, която ще изтегля колони

Кой е най-добрият начин за дефиниране на мрежа по подразбиране с помощта на Foundation и Rails, която ще проверява броя на елементите в ред и ще изтегля колони, за да поддържа оформлението на мрежата?

Например, искам оформление по подразбиране, което е 3 x 3, което се равнява на общо 9 елемента, мога да направя нещо подобно:

<% @jobs.in_groups_of(3, false) do |row| %>
  <div class="row"> 
    <% for job in row %>
      <div class="large-4 columns>
        <div class="panel">
          <% job.address %>
          <% job.state %>
          <% job.postcode %>
        </div> 
      </div>
    <% end %>
  </div>
<% end %>

Ако имам точно 9 елемента, изгледът ми ще се изобрази така:

   <div class="row"> 
      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>
    </div>

    <div class="row"> 
      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>
    </div>

    <div class="row"> 
      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>
    </div>

Това, което обикновено се случва обаче е, че вместо 9 елемента завършвате със 7 или 8, което означава, че трябва да започнете да добавяте класа за изтегляне към последния елемент - нещо подобно:

    <div class="row"> 
      <div class="large-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>

      <div class="large-4 pull-4 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>
    </div>

Or: 

    <div class="row"> 
      <div class="large-4 pull-8 columns>
        <div class="panel">
          219/32 Makenzie Island Squares
          SCHUPPEMOUTH, MASSACHUSETTS
          44753
        </div> 
      </div>
    </div>

ruby-on-rails layout zurb-foundation
person Thomas Taylor    schedule 05.01.2015    source източник

Отговори (1)


arrow_upward
0
arrow_downward

След като прочетете по-задълбочено документацията на Foundation, можете да добавите "край", когато ред не Нямам брой, който да дава 12. Това спира стандартното изместване на елемент вдясно. Въпреки че това не е идеалното решение в Rails цикъл, простото добавяне на това към всяка колона коригира проблема без неочаквано поведение.

<% @jobs.in_groups_of(3, false) do |row| %>
  <div class="row"> 
    <% for job in row %>
      <div class="large-4 columns end>
        <div class="panel">
          <% job.address %>
          <% job.state %>
          <% job.postcode %>
        </div> 
      </div>
    <% end %>
  </div>
<% end %>
person Thomas Taylor    schedule 09.01.2015