如何使用rails内联显示？

Question

我想知道我如何显示我的帖子“inline” 我在css上开始，我不知道我必须把代码显示在哪里：内联在我的css工作表上。我会尝试post，main_content，body，但它不起作用。你能否向我解释如何做到这一点，我遵循了很多关于它的结果，它对我来说从来都不一样，所以我不懂如何去做。

我实际交显示：

我的代码： 指数后视图：

<div class="transitions-enabled" id="post"> 

<%- @posts.each do |post|%> 

    <div class="row"> 

     <div class="post"> 


     <div class="panel-body"> 
      <div class="form-group text-center"> 
      <h3> <%=post.title%></h3> 
      </div> 
     </div> 

     <div class="box panel panel-default"> 
      <div class="image_wrapper"> 
      <%= link_to (image_tag post.image.url(:medium), class: 'img-responsive'), post_path(post)%> 
      </div> 
     </div> 

     <div class="panel-body"> 
      <div class="form-group text-center"> 
      <p><%= post.prix %></p> 
      </div> 
     </div> 


    </div> 
    </div> 

<%end%> 
</div> 

&我的应用程序的CSS：

@import "bootstrap-sprockets"; 
@import "bootstrap"; 

@mixin box-shadow { 
    -webkit-box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0; 
    -moz-box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0; 
    box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0; 
} 

$red: #DB6161; 

body { 
    background: rgb(235, 238, 243); 
} 

.main_content { 
    padding: 0 0 50px 0; 

} 

.alert { 
    padding: 15px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
    border-radius: 5px; 
    @include box-shadow; 
    background: white; 
    font-weight: bold; 
} 


.navbar { 
    margin-bottom: 50px; 
    @include box-shadow; 
    border: none; 
    .navbar-brand { 
    text-transform: uppercase; 
    letter-spacing: -1px; 
    font-weight: bold; 
    font-size: 25px; 
    a { 
     color: $red; 
    } 
    } 
} 

.post { 
    background: white; 
    border-radius: 5px; 
    margin-bottom: 40px; 
    @include box-shadow; 
    float: left; 


    .image_wrapper { 
    width: 400px; 
    height: 300px; 
    border-radius: 5px 5px 5px 5px; 
    overflow: hidden; 
    } 
    img { 
    width: 100%; 
    -webkit-transition: all .3s ease-out; 
    -moz-transition: all .3s ease-out; 
    -o-transition: all .3s ease-out; 
    transition: all .3s ease-out; 
    &:hover { 
     transform: scale(1.075); 
    } 
    .panel-body { 
    padding: 35px; 
    h1 { 
     margin: 0 0 10px 0; 
    } 
    .description { 
     color: #868686; 
     line-height: 1.75; 
     margin: 0; 
    } 
    } 
    } 
    h2 { 
    padding: 15px 5%; 
    margin: 0; 
    font-size: 20px; 
    font-weight: normal; 
    line-height: 1.5; 
    a { 
     color: $red; 
    } 
    } 
} 

#post_top { 
    margin-bottom: 50px; 
} 

#post_info, #ingredients, #directions { 
    background: white; 
    @include box-shadow; 
    min-height: 360px; 
    border-radius: 5px; 
    padding: 2em 8%; 
} 

.post_image { 
    max-width: 100%; 
    border-radius: 5px; 
    @include box-shadow; 
} 

#post_info { 
    h1 { 
    font-size: 36px; 
    font-weight: normal; 
    color: $red; 
    } 
    .description { 
    color: #8A8A8A; 
    font-size: 20px; 
    } 
} 

#ingredients, #directions { 
    margin-bottom: 50px; 
    ul, ol { 
    padding-left: 18px; 
    li { 
     padding: 1em 0; 
     border-bottom: 1px solid #EAEAEA; 
    } 
    } 
} 

.form-inline { 
    margin-top: 15px; 
} 
.form-input { 
    width: 65% !important; 
    float: left; 
} 
.form-button { 
    float: left; 
    width: 30% !important; 
    margin-left: 5%; 
} 
.add-button { 
    margin-top: 25px; 
} 

Answer 1

除了CSS风格之外，您遇到的问题是您已经为每篇文章添加了一个row类。

说你要显示的每个行的三个职位，像这样做：

<%- @posts.each_slice(3) do |posts| %> 
    <div class="row"> 
    <%- posts.each do |post| 
     ... 
    <% end %> 
    </div> 
<% end %> 

更新：刚刚意识到原有的代码示例中没有显示尽管这已被标记为答案。已更新以显示示例。

或者只是将.row div移出我们的each区块，这会将所有帖子放入一个.row。

Answer 2

当您使用的引导，利用柱子：

<div class="transitions-enabled" id="post"> 
    <div class="row">  
     <%- @posts.each do |post|%> 
      <div class="col-md-4 post"> 
       <!-- post content --> 
      </div> 
     <% end %> 
    </div>  
</div> 

您会发现不同的列类型here。

给出您的帖子.col-md-4类会使他们出现三个对齐：

4-4-4
4-4-4

总结每行12

你应该同时删除您的css中的float样式，并在您的迭代之外移动.row，因为引导会为您提供帮助。

Answer 3

您应该尝试将其添加到panel-body。

也可以在http://masonry.desandro.com/下看看（不是现在，但是在将来当你使用3块以上）连续平铺的div。