不同大小的帖子

时间:2017-05-14 18:02:04

标签: html css twitter-bootstrap

所以我使用的是Rails 5和'bootstrap','4.0.0.alpha3'。我使用Bootstrap卡和我的卡的大小是col-lg-6。我试图做的虽然是大屏幕我喜欢的帖子旋转不同的大小。现在我的索引页面上的帖子看起来像这样

                           col-lg-6 col-lg-6
                           col-lg-6 col-lg-6 
                           col-lg-6 col-lg-6 
                           col-lg-6 col-lg-6 

依旧等等。

所以我试图添加一些基本的样式,我希望它看起来像是更多的帖子在我的索引上显示这样的东西。

                               col-lg-12
                           col-lg-6 col-lg-6
                               col-lg-12
                           col-lg-6 col-lg-6
                               col-lg-12
                           col-lg-6 col-lg-6

所以基本上我正在寻找两种不同的卡片尺寸,我只是不确定如何让它们正常工作。如果你们都需要查看代码,我很乐意添加它。

这是_post.html.erb

<div class='col-lg-6'>
 <div class="card">
 <%= link_to post do %>
  <div class="card-topper" style='background-image: url(<%=post.banner_image_url %>);'></div>
<% end %>
  <div class="card-block">
    <h4 class="card-title"><%= link_to post.title, post %></h4>
    <p class='tags'><%= raw post.tags.map { |t| link_to t.name, posts_path(tag: t.name) }.join(', ') %></p>
    <h6 class="published-date"><%= post.display_day_published %></h6>
  <%= link_to post do %>
    <p class="card-text"><%= truncate(post.description, length: 130) %></p>
  <% end %>
</div>
</div>
</div>

0 个答案:

没有答案