Bootstrap Modal切片

Question

我需要幫助，設置我的引導模式以顯示如下內容： 這是Facebook試圖讓它看起來很相似。

我已經將視頻設置，但有困難時期試圖讓註釋部分是在正確的地方。我的按鈕在底部。這是我的代碼。它不會完全按照我所需要的去做。嘗試了數百種不同的方式。要麼我是愚蠢的，或者還沒有找到正確的方式。我也試圖用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

我沒有看到包含註釋一個div，但如果你想評論排隊在x軸與視頻，你可以在div具有CSS規則應用於display: flexbox都包裹到它。或者，您可以將CSS規則display: inline添加到註釋div。 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>