有人可以帮助我使用轨道迭代器，例如＆＃34;每个＆＃34;？

Question

我有代码和css设置，但我不确定如何实现它们。因此，rails代码基本上会为每本书提供标题，作者，价格等。

但我希望每本书都采用这样的布局：http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/

当我尝试将其插入时，它唯一的垂直而非水平布局

守则：

<% @books.each do |book| %> 

      <%= link_to book.title, product  %> 
      <%= book.edition %>
      <%= image_tag book.image.url(:thumb) %>
      <%= book.author %>
      <%= link_to time_ago_in_words(book.created_at) + " ago", book %>

<% end %>

我只是不确定如何做到这一点..提前感谢！

Answer 1

你可以尝试

<% @books.each do |book|   %>
  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <%= link_to book.title, product  %>
    <%= book.edition %>
    <%= image_tag book.image.url(:thumb) %>
    <%= book.author %>
    <%= link_to time_ago_in_words(book.created_at) + " ago", book %>
  </div>
<% end %>

您可以编辑这些类并添加更多元素，使其看起来像您喜欢的方式

Answer 2

没有BOOSTRAP： -

<强> HTML -----------------

<div class="smart_listing">
<% if @books.present? %>
  <ul>
 <% @books.each do |book| %> 
    <li>
        <a href="<%= product_path%>">
           <%= image_tag book.image.url(:thumb) %>
       </a>
      <%= book.title %>|<%= book.edition %>|<%= book.author %>|<%= time_ago_in_words(book.created_at) + " ago", book %>    
   </li>
<%end%>
  </ul>
<%end%>
</div>

<强>的CSS -------

.smart_listing {
/*change the width as you need*/
  width: 900px;
  margin: 0 auto;
  overflow: auto;
}

.smart_listing ul {
  list-style-type: none;
}

.smart_listing li img {
  float: left;
  margin: 10px;
  border: 5px solid #fff;

  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  -ms-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
}

.smart_listing li img:hover {
  -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
  box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
}

WITH BOOTSTRAP ... 只需将pull-left或float:left添加到li即可将其设为列表页

<% if @books.present? %>
<ul class="list-unstyled">
 <% @books.each do |book| %> 
     <li class="pull-left">
      <%= link_to book.title, product  %> 
      <%= book.edition %>
      <%= image_tag book.image.url(:thumb) %>
      <%= book.author %>
      <%= link_to time_ago_in_words(book.created_at) + " ago", book %>
    </li>
<% end %>
</ul> 
<%end%>

会看到一些类似的东西： -

Answer 3

试试这个：

<div class='row'>
  <% @books.each do |book| %> 
    <div class='col-lg-3 col-md-4 col-xs-6 thumb'>
      <a href= <%= book.title %>, class ='thumbnail' >
        <%= image_tag book.image.url(:thumb), :class => 'img-responsive' %>  
      </a>
      <%= book.edition %>
      <%= book.author %>
      <%= link_to time_ago_in_words(book.created_at) + " ago", book %>
    </div>
  <% end %>
</div>

请注意，<img>（由image_tag方法生成）标记位于<a>标记内，这就是为什么我们必须使用HTML <a>标记代替这里有link_to方法。