Bootstrap Modal Schnitt

Question

Ich brauche Hilfe bei der Einrichtung meiner Bootstrap-Modal zu zeigen, etwa so: Dies ist Facebook ist so versucht, es ähnlich aussehen.

Ich habe bereits das Video eingerichtet, aber harte Zeit versucht, die Kommentare Abschnitte an der richtigen Stelle zu sein, zu bekommen. Meine Knöpfe sind auf der Unterseite. Hier ist mein Code. Es wird nicht genau das tun, was ich brauche. Versuchte Hunderte von Diff-Wegen. Entweder bin ich dumm oder habe noch nicht den richtigen Weg gefunden. Ich habe versucht, es auch mit col-*-* zu tun. display: flexbox angewandt haben

<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

Ich sehe nicht einen div, dass die Kommentare enthält, aber wenn man die Kommentare will mit dem Video auf die x-Achse aufreihen Sie können beide wickeln in einem div, die die CSS-Regel zu ihm. Oder Sie können die CSS-Regel display: inline dem Kommentar div hinzufügen. jsfiddle

Answer 2

können Sie versuchen, etwas wie dieses

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>