如何使用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。