レールを使ってインラインで表示するには？

Question

私はポスト "インライン"を表示する方法を知りたいです 私はCSSで始まっていますが、コード表示をどこに置く必要があるのか​​分かりません。私はpost、main_content、bodyを試してみたいが、うまくいかない。私はそれをやる方法を説明することができますか、私は多くのtutoに従って、それは私にとっては決して同じではないので、私はそれを行う方法を理解していません。

私の実際のポスト表示：

マイコード： インデックスポストビュー：

<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クラスが追加されています。

はこのようにそれを行う、あなたはそれぞれの行に3件の投稿を表示したいと言う：

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

更新：ただ、これは答えとしてマークされているが表示されなかった元のコード例を実現しました。例を示すように更新されました。

.row divをeachブロックの外側に移動すると、すべての投稿が1つの.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クラスは彼らが3で整列表示されるようになりますあなたのポストを与える

：

各行を合計

4-4-4
4-4-4

にあなたは必要がありますまた、あなたのCSSのfloatスタイリングを削除し、.rowをあなたの反復の外に移動してください。ブートストラップがそれを処理します。

Answer 3

パネル本体に追加してください。

また、連続タイリングされたdivの場合は、http://masonry.desandro.com/にも表示されます（今後は3つ以上のブロックを使用しています）。