Question

我正在尝试使用rails4应用程序中的materialize-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

中

如何使用materialize css和rails 4为每个新条目创建卡而不是表行

1 个答案: