我無法得到我的覆蓋（評論），以填補適當的寬度

Question

我的覆蓋目前看起來像這樣，我正在尋找它根據大小自動調整（因爲這是響應）...

只是要注意...我使用Bootstrap。 http://getbootstrap.com/

這裏是第一組HTML的...

<div class="Discussion box"> 
     <div class="topic"> 
     <img class="PhotoThumbnail TopicPhoto" src="{{user.profile.avatarURL}}" /> 
     <div class="Name">{{user.profile.firstName}} {{user.profile.lastName}} - {{title}} </div> 
     <p class="TopicText">{{body}}</p> 
     </div> 

     <div class="show-hide-comments"> 
     Show Comments (or Hide Comments if showing) 
     </div> 
     {{> postComments}} 
    </div> 

這裏是爲徵求意見&職位代碼...

<template name="postComments"> 
    <div class="CommentOverlay"> 
    {{#each comments}} 
    {{> showComment}} 
    {{/each}} 

    {{> newPostComment}} 
    </div> 
    </template> 

    <template name="showComment"> 
    {{#if editing}} 
    {{> editPostComment}} 
    {{else}} 
    <div class="TopicComments"> 
     <img class="PhotoThumbnail" src="{{user.profile.avatarURL}}" /> 
     <div class="Name">{{user.profile.firstName}} {{user.profile.lastName}}</div> 
     <p class="CommentText">{{> editPencil}} {{body}}</p> 
    </div> 
    {{/if}} 
    </template> 

    <template name="newPostComment"> 
    <div class="TopicComments"> 
     <img class="PhotoThumbnail" src="{{currentUser.profile.avatarURL}}" /> 
     <textarea class="TopicAddCommentText" rows="2" name="comment" placeholder="Write a comment..."></textarea> 
     <button data-action="post-comment" class="TopicAddCommentSubmit btn"><p class="SubmitButtonText">Submit</p></button> 
    </div> 
    </template> 

    <template name="editPostComment"> 
    <div class="TopicComments"> 
     <img class="PhotoThumbnail" src="{{currentUser.profile.avatarURL}}" /> 
     <textarea class="TopicAddCommentText" rows="2" name="comment" placeholder="Write a comment..." autofocus>{{body}}</textarea> 
     <button data-action="save-comment" class="TopicAddCommentSubmit btn"><p class="SubmitButtonText">Submit</p></button> 
    </div> 
    </template> 

這裏是三網融合

/* Shared */ 
.PhotoThumbnail { 
    border-style: solid; 
    border-width: 1px; 
    border-color: #DEE2EC; 
    border-radius: 100px; 
    height: 45px; 
    width: 45px; 
    margin-left: -80px; 
} 

.bottom-border { 
    border: 1px; 
    border-style: solid; 
    border-color: #EEEEEE; 
    margin: 0px -39px 0px -117px; 
} 

.TopicPhoto { 
    margin-top: 30px; 
} 

.Name { 
    font-weight: bold; 
    margin-top: -50px; 
    margin-left: -25px; 
} 

.CommentText{ 
    margin-left: -25px; 
} 

.EditComment { 
    float: right; 
    width: 10px; 
    height: 10px; 
} 

.TopicText { 
    min-height: 40px; 
    margin-bottom: 5%; 
    margin-left: -25px; 
} 

.TopicComments { 
    min-height: 45px; 
    padding: 0 0 0 80px; 
    margin-left: 20px; 
} 

.TopicAddCommentText { 
    border-color: #DEE2EC; 
    border-width: 1px; 
    width: 85%; 
    height: 50px; 
    border-style: solid; 
    border-radius: 5px; 
    margin-left: 1%; 
} 

.TopicAddCommentSubmit { 
    width: 115px; 
    height: 50px; 
    background-color: #B679B4; 
    border-color: #772A75; 
    border-width: 1px; 
    border-style: solid; 
    float: right; 
    box-shadow: 0px 0px 10px #888888; 
    margin: 0px -5px 0 0; 
} 

.SubmitButtonText { 
    color: white; 
    font-weight: bold; 
    margin-top: 9px; 
} 

.CommentOverlay { 
    background-color: #F6F7F8; 
    margin-left: -37px; 
    padding: 20px; 
    margin-right: -38px; 
    border-radius: 4px; 
    margin-top: 20px; 
} 



/* Discussions Only */ 

.Discussion { 
    height: 100%; 
    width: 100%; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #DEE2EC; 
    border-radius: 10px; 
    padding-left: 30px; 
    margin-bottom: 30px; 
} 

.topic { 
    margin-bottom: -20px; 
    padding: 0 0 0 80px; 
} 







/* Goals Only */ 

.Goal { 
    height: 100%; 
    width: 100%; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #DEE2EC; 
    border-radius: 10px; 
    padding-left: 30px; 
    margin-bottom: 30px; 
} 

.GoalBoxes { 
    width: 49%; 
    margin: 20px 0 0 0; 
    min-height: 110px; 
    float: left; 
} 


.GoalTopRightBox { 
    float: right; 
} 

.GoalBottomRightBox { 
    float: right; 
} 

.GoalHeading { 
    font-weight: bold; 
    margin: 5% -5%; 
} 

.GoalLine { 
    margin-top: 0px; 
    margin-bottom: 5px; 
} 

.GoalInput { 
    font-weight: normal; 
} 

.goalposterline { 
    margin-top: 30px; 
} 

.show-hide-comments { 
/* border-top-width: 1px; 
    border-top-style: solid; 
    border-bottom-width: 1px; 
    border-bottom-style: solid;*/ 
    text-align: center; 
    margin-bottom: -20px; 
    color: gray; 
} 

Answer 1

如果沒有您的代碼的演示很難說我可以看看，但它看起來l ike問題的根源在於父元素<div class="Discussion box">應用了一些padding-left這一事實。

.Discussion { 
    height: 100%; 
    width: 100%; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #DEE2EC; 
    border-radius: 10px; 
    /* padding-left: 30px; Remove this */ 
    margin-bottom: 30px; 
} 

您應該刪除它並將其應用於<div class="topic">。然後，您需要將以下樣式應用於<div class="CommentOverlay">

.CommentOverlay { 
    width: 100%; /* Add this */ 
    background-color: #F6F7F8; 
    /* margin-left: -37px; Remove this */ 
    padding: 20px; 
    /* margin-right: -38px; Remove this */ 
    border-radius: 4px; 
    margin-top: 20px; 
}