如何为每个新条目创建带有实体化css和rails 4的卡片而不是表行

Question

我正试图在rails 4应用程序中为每个新条目创建带有实体化css的卡片而不是表行。但每次我尝试创建新条目时，它都会落后于前一个条目。

index.html.erb

<div class="container">
<div class="row">
  <div class="s12 m6 l6 col">
    <% @students.each do |student| %>
      <div class="card medium hoverable">
        <!-- Card Image -->
        <div class="card-image waves-effect waves-light waves-block">
          <%= image_tag student.avatar.url(:large), class: "activator" %>
        </div>
        <!-- Card Content -->
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4 card-modification">
            <!-- Student Name -->
            <%= student.Student_Prefix %> <%= student.First_Name %> <%= student.First_Name %> <%= student.First_Name %>
            <i class="material-icons right">menu_vert</i>
          </span><br><br>
          <!-- Button -->
          <p class="center-align">
            <%= link_to student, :class=> "btn waves-light waves-effect grey darken-4" do %>
              Show
            <% end %>  
            <%= link_to edit_student_path(student), :class=> "btn waves-light waves-effect grey darken-4" do %>
              Edit
            <% end %>  
            <%= link_to student, method: :delete, data: { confirm: 'Are you sure?' }, :class=> "btn waves-light waves-effect grey darken-4" do %>
              Delete
            <% end %>  
          </p>
        </div>
        <!-- Card Reveal -->
        <div class="card-reveal">
          <!-- Other Details -->
          <span class="card-title grey-text text-darken-4">
            More Student Details
            <i class="material-icons right">close</i>
          </span>
          <!-- Horizontal Line -->
          <hr>
          <!-- Card Paragraph -->
          <table class="bordered centered">
            <tbody>
              <!-- Department And Branch -->
              <tr>
                <th>Course</th>
                <td><%= student.Department_Type %> <span>in</span> <%= student.Branch %></td>
              </tr>
              <!-- Date of Birth -->
              <tr>
                <th>D.O.B</th>
                <td><%= student.Date_Of_Birth %></td>
              </tr>
              <!-- Gender -->
              <tr>
                <th>Gender</th>
                <td><%= student.Gender %></td>
              </tr>
              <!-- Class Roll Number -->
              <tr>
                <th>Class Roll Number</th>
                <td><%= student.Class_Roll_Number %></td>
              </tr>
              <!-- University Roll Number -->
              <tr>
                <th>University Roll Number</th>
                <td><%= student.University_Roll_Number %></td>
              </tr>
              <!-- Mobile Number -->
              <tr>
                <th>Mobile Number</th>
                <td><%= student.Mobile %></td>
              </tr>
              <!-- Email Address -->
              <tr>
                <th>Email Address</th>
                <td><%= student.Email %></td>
              </tr>
              <!-- Postal Code -->
              <tr>
                <th>Postal Code</th>
                <td><%= student.Postal_Code %></td>
              </tr>
              <!-- Address -->
              <tr>
                <th>Address</th>
                <td><%= student.Address %></td>
              </tr>
            </tbody>
          </table>
        </div>
      <% end %>
    </div>
  </div>
</div>
</div>

我想添加如下内容：https://summerofcode.withgoogle.com/organizations/对于每个新条目。

Answer 1

我首先创建一个ul，并将卡的所有元素包装在li 中