Question

我正在创建一个Reddit克隆，现在可以创建注释和子注释。使用CSS我能够为“子”注释（子注释）添加边距（缩进）。但我的“孙子”评论（子分评论）保留了与我的“孩子”评论相同的缩进程度。

如何添加一个可以增加每个子评论边际的逻辑？有人建议使用sass，但我从未使用过它...如果这是最好的方法，请给我一个提示（我想学习）。

这是我的评论部分

<%= div_for(comment) do %>
    <div class="comments_wrapper clearfix">
        <div class="pull-left">

            <!-- Parent Comments -->
            <!-- Determines if the comment is parent or not-->
            <% if !comment.ancestry? %> 

            <p class="parent"><%= comment.body %></p>
            <p><small>Submitted <strong><%= time_ago_in_words(comment.created_at) %> ago</strong> by <%= comment.user.email %></small></p>

            <!--Reply button for parent comment-->
            <button onClick="$('#reply<%=comment.id%>').show()" class="btn btn-sm btn-default">Reply</button>

                <!--Reply form for parent comment-->
                <div id="reply<%=comment.id%>" style="display:none;">
                <%= form_for [@link, @comment = Comment.new] do |f| %>
                <%= f.hidden_field :ancestry, :value => comment.id %>
                  <%= f.text_area :body %> <br>
                  <%= f.submit %>
                  <% end %>
                </div>

            <% else %>

            <!-- Child Comments -->
            <div class="row">
                <div class="col-md-3-offset-3 child">
                    <p class="child"><%= comment.body %></p>
                    <p><small>Submitted <strong>
                        <%= time_ago_in_words(comment.created_at) %> ago</strong> by <%= comment.user.email %></small></p>

                    <!--Reply button for child comment-->
                    <button onClick="$('#reply<%=comment.id%>').show()" class="btn btn-sm btn-default">Reply</button>

                    <!--Reply form for child comment-->
                    <div id="reply<%=comment.id%>" style="display:none;">
                        <%= form_for [@link, @comment = Comment.new] do |f| %>
                        <%= f.hidden_field :ancestry, :value => comment.id %>
                          <%= f.text_area :body %> <br>
                          <%= f.submit %>
                          <% end %>
                    </div>
                </div>
            </div>
            <% end %>


        </div>

        <div class="btn-group pull-right">
            <% if comment.user == current_user -%>
                <%= link_to 'Destroy', comment, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-sm btn-default" %>
            <% end %>


        </div>
    </div>
<% end %>

最后，这是我的CSS

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

#logo {
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -1px;
    padding: 15px 0;
    a {
        color: #2F363E;
    }
}

#main_content {
    #content {
        float: none;
    }
    padding-bottom: 100px;
    .link {
        padding: 2em 1em;
        border-bottom: 1px solid #e9e9e9;
        .title {

            a {
                color: #FF4500;
            }
        }
    }
    .comments_title {
        margin-top: 2em;
    }
    #comments {
        .comment {
            padding: 1em 0;
            border-top: 1px solid #E9E9E9;
            .lead {
                margin-bottom: 0;
            }
        }
    }
}


.child {
    padding-left: 15%;
    font-size: 20px;
}

Answer 1

只需在填充元素中设置部分，<ul>或div填充。

-

你的代码很混乱;我基本上将每个comment放入其自己的部分中。这将允许您递归调用子注释，嵌套在每个递归级别：

#app/views/comments/index.html.erb
<%= render @comments %>

#app/views/comments/_comment.html.erb
<div class="row">
    <div class="col-md-3-offset-3 child">
         <p class="child"><%= comment.body %></p>
         <p>
            <small>Submitted <strong>
            <%= time_ago_in_words(comment.created_at) %> ago</strong> by <%= comment.user.email %></small>
         </p>

         <!--Reply button for child comment-->
         <button onClick="$('#reply<%=comment.id%>').show()" class="btn btn-sm btn-default">Reply</button>

         <!--Reply form for child comment-->
         <div id="reply<%=comment.id%>" style="display:none;">
             <%= form_for [@link, @comment = Comment.new] do |f| %>
                <%= f.hidden_field :ancestry, :value => comment.id %>
                <%= f.text_area :body %> <br>
                <%= f.submit %>
             <% end %>
         </div>

         <div class="btn-group pull-right">
            <%= link_to 'Destroy', comment, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-sm btn-default" if comment.user == current_user%>
        </div>

        <!-- PUT NESTING HERE -->
        <% if comment.has_children? %>
            <div class="nested">
               <%= render comment.children %>
            </div>
        <% end %>
    </div>
</div>

如何为嵌套注释添加边距？

1 个答案: