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>