부트 스트랩 모달 쉐이핑

Question

다음과 같이 표시하려면 부트 스트랩 모달을 설정하는 데 도움이 필요합니다. 이것은 페이스 북과 비슷하게 보이려고합니다.

이미 비디오는 설정하지만, 코멘트 섹션은 올바른 위치에있을려고 힘든 시간을 보내고있다. 내 단추가 바닥에 있습니다. 여기 내 코드가있다. 그것은 내가 필요로하는 것을 정확하게하지 못할 것이다. 수백 가지의 서로 다른 방법을 시도했습니다. 어느 쪽이든, 나는 어리 석거나 아직 바른 길을 찾지 못했습니다. 나는 col-*-*으로 그것을 시도했다.

<div id="videoModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg modal-wide"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Challenge Video</h4> 
     </div> 
     <div class="modal-body" > 
     <video id="compVideo" class="video-js vjs-default-skin" controls preload="auto" data-setup="{}" height="200" width="300"><source src="test1.mp4" type="video/mp4"></video> 
     <button class="btn btn-lg btn-danger"><i class="fa fa-bomb"></i></button> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

나는 메모가 포함 된 사업부가 표시되지 않습니다,하지만 당신은 비디오와 x 축에 줄을 주석을하려는 경우 display: flexbox가 적용되는 CSS 규칙이있는 div 모두를 포장 할 수 있습니다 그것에. 또는 코멘트 div에 CSS 규칙 display: inline을 추가 할 수 있습니다. jsfiddle

Answer 2

이

CSS

.modal-body 
{ 
    display:table; 
} 
video,.comments 
{ 
    display:table-cell; 
    vertical-align:middle; 
} 

HTML

<div id="videoModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog modal-lg modal-wide"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Challenge Video</h4> 
      </div> 
      <div class="modal-body" > 


      <video id="compVideo" class="video-js vjs-default-skin" controls preload="auto" data-setup="{}" height="200" width="300"><source src="test1.mp4" type="video/mp4"></video> 
     <div class="comments"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam adipisci in asperiores repellendus aperiam pariatur quidem deserunt provident nam beatae, porro, illo dolore iure, voluptate veniam cupiditate aspernatur esse modi? 
      </div> 



      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     </div> 
    </div> 

    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#videoModal">Open Modal</button> 

뭔가를 시도 할 수 있습니다