닫기 버튼 CSS 위치

하단에 닫기 버튼이있는 모달이 있습니다. 댓글 섹션의 길이에 따라 위아래로 움직이는 것처럼 보입니다. 내가 코멘트 섹션이 얼마나 오래 상관없이 바닥에 그것의 위치를 수정하려고 해요. 그래서 상대을 사용했지만, 여러분이이 문제를 해결할 더 좋은 아이디어가 있다면 감사하겠습니다. 감사.닫기 버튼 CSS 위치

보기 :

<div class="form-horizontal"> 
    <div class="modal-title title"> 
     <p>@ViewBag.name<span> Info</span></p> 
    </div> 
    <div id="info"> 
     <p>@Html.Label("Name: ") @ViewBag.name</p> 
     <p>@Html.Label("Age: ") @ViewBag.age</p> 
     <p>@Html.Label("Comment: ") @ViewBag.comment</p> 
    </div> 
    <div id="close"> 
     <div class="col-md-12"> 
      <input type="button" id="closeButton" value="Close" class="btn btn-default" /> 
     </div> 
    </div> 
</div>

CSS : 고정 그게 당신이 원하는 경우 바닥에 가라 :

.btn { 
    border: 2px solid transparent; 
    background: white; 
    color: black; 
    font-size: 16px; 
    line-height: 15px; 
    padding: 10px 0; 
    display: block; 
    width: 150px; 
    margin: 0 auto; 
} 
.title { 
    position: relative; 
    top: 20px; 
} 
.title p { 
    text-align: center; 
    font-size: 30px; 
} 
.title span { 
    color: black; 
} 
#info {  
    position: relative;  
    top: 50px; 
    left: 20px; 
} 
#info p { 
    font-size: 15px !important; 
    width: 310px; 
} 
#close { 
    position: relative; 
    top: 70px; 
}

출처

2016-09-14 pavilion

그냥 몸 밖으로 버튼 위치를

enter code h

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<style> 
 
</style> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body" style="height:200px; overflow-y:scroll;"> 
 
      <p>@Html.Label("Name: ") @ViewBag.name</p> 
 
     <p>@Html.Label("Age: ") @ViewBag.age</p> 
 
     <p>@Html.Label("Comment: ") @ViewBag.comment</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <input type="button" id="closeButton" value="Close" class="btn btn-default" /> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

조립식

출처

2016-09-14 19:22:00 C1234

그냥 위치를 추가 할 수 있습니다.

#close { 
    position: fixed; 
    bottom: 0px; 
    left: 50%; 
}

출처

2016-09-14 19:06:58 Keith

그래 변경으로 스크롤 할 수 있도록 모달 본체에 고정 높이를 얻었으나 그런 다음 화면 크기에 따라 다릅니다 (예 : F11 키를 눌러 전체 화면으로 전환 한 경우) 상자 밖으로 나옵니다. 화면 해상도에 상관없이 어떻게 그 버튼을 모달 바닥에 붙이게 할 수 있습니까? – pavilion

나는 바이올린에서 f11을 눌렀다. 그리고 나는 아직도 그것을 바닥에서 본다. – Keith

닫기 버튼 CSS 위치

답변

관련 문제