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

Question

我正在将 Bootstrap 4 专辑模板应用于我正在开发的 Ruby on Rails 网站。原始专辑模板如下所示：

但我的显示不是这样。它显示为一个列表，一个在另一个之下，类似于博客页面的外观。

我认为我需要进行必要更改的文件位于 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) %>

我没有遗漏原始模板中的任何 Bootstrap 类，所以我想知道是不是我的代码导致它无法正确呈现。

这里是 stylesheets/products.scss 文件：

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

为您的 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>

它应该可以工作。

Answer 2

我希望您尝试在同一迭代中输出图像和描述。

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

请注意 here 我可以看到他们正在显示他们的图像

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

注意这里应用的内联样式。另外，我不确定product.image 是图像路径还是实际二进制图像。如果是前者，则需要将其放入 img 标签的 src= 属性中，类似于他们示例中使用的引导程序。

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