如何使Ruby on Rails将数据显示为Bootstrap网格？

Question

I am applying the Bootstrap 4 album template to a Ruby on Rails website I am developing. The original album template looks like this:

But mine is not displaying like that. It's displaying as a list, one beneath the other, similar to what a blog page would look like.

I believe the file where I need to make the necessary changes is here in app/views/products/index.hmtl.erb:

<div class="album text-muted">
  <div class="container">

    <div class="row">
      <div class="card">

        <%= render @products %>

          <% @products.each do |product| %>
           <%= product.image %>
          <% end %>
        <p class="card-text">
          <% @products.each do |product| %>
           <%= product.description %>
          <% end %>
        </p>
      </div>
    </div>

  </div> 
</div>


<%= paginate @products %>

<%= link_to 'New Product', new_product_path if logged_in?(:site_admin) %>

I am not missing any of the Bootstrap classes from the original template, so I am wondering if its my code that is causing it not to render appropriately.

Here is the stylesheets/products.scss file:

// Place all the styles related to the products controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";
@import "font-awesome";

body {
  min-height: 75rem; /* Can be removed; just added for demo purposes */
}

.navbar {
  margin-bottom: 0;
}

.jumbotron {
  padding-top: 6rem;
  padding-bottom: 6rem;
  margin-bottom: 0;
  background-color: #fff;
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 40rem;
}

.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0;
}

.card > img {
  margin-bottom: .75rem;
}

.card-text {
  font-size: 85%;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

/*
* Custom styles
*/

.social-links li a {
  font-size: 1.5em;
}

Answer 1

I'd like for you to try to output the image and the description in the same iteration.

<% @products.each do |product| %>
    <div class="card">
        <%= product.image %>
        <p class="card-text">
            <%= product.description %>
        </p>
    </div>
<% end %>

Note that here I can see they are displaying their images like so

<img data-src="holder.js/100px280/thumb" 
    alt="100%x280" style="height: 280px; width: 100%; 
    display: block;" src="some/path/" data-holder-rendered="true">

Notice the inline styles that are being applied here. Also, I'm not sure if product.image is a path to an image or an actual binary image. if it's the former you'll need to put it into the src= attribute of an img tag similar to the one bootstrap uses in their example.

<img scr='<%= product.image %>' />

Answer 2

try this code for your index.html.erb:

<div class="album text-muted">
   <div class="container">
      <div class="row">
         <% @products.each do |product| %>
         <div class="card">
            <%= image_tag("picture_holder")%>
            <strong class="card-text"><%= product.summary %></strong>
            <a href="<%= product_path(product) %>"><%= image_tag("picture_holder")%><a>
            <p class="card-text"><%= product.price %></p>
            <p class="card-text"><%= product.description %></p>
         </div>
         <% end %>
      </div>
      <div class="row">
        <div class="col-md-12">
          <%= paginate @products %>
        </div>
      </div>
   </div>
</div>

it should work.