적절한 너비를 채우기 위해 오버레이 (설명)를 얻을 수 없습니다.

Question

내 오버레이는 현재 다음과 같습니다. 크기에 따라 자동으로 조정하려고합니다.

메모하기 만하면 ... 부트 스트랩을 사용하고 있습니다. 여기

http://getbootstrap.com/은 ...

여기

<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> 

는 CSS입니다 ... ... 여기

<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> 

있습니다 의견 & 게시물에 대한 코드는 HTML의 첫 번째 세트입니다

/* 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

코드 데모 없이는 말하기 어렵지만 귀하의 문제의 근원은 부모 요소 <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; 
}