垂直对齐Bootstrap3响应式网格中的两列div

Question

我想垂直对齐（右对齐或中对齐）右侧列中的视频和左侧列中的文本。鉴于下面的代码，我将如何做到这一点？

<div class="container"> 
    <div class="jumbotron text-center"> 
     <div class="row"> 
     <div class="col-md-6"> 
      <h1>Heading<br>Text</h1> 
      <p>Bacon ipsum dolor sit amet ham hock cow swine meatball salami short loin. Fatback boudin sausage ham. Meatloaf pork chop corned beef, andouille t-bone pancetta flank. Drumstick meatloaf pancetta bresaola, turducken biltong jowl prosciutto ground round kevin venison beef ribs shoulder chuck ham.</p> 
      <a class="btn btn-success btn-lg" href="#">Submit</a> 
     </div> 
     <div class="col-md-6"> 
      <iframe src="http://fast.wistia.net/embed/iframe/huifu25cy3?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="440" height="248"></iframe><script src="http://fast.wistia.net/assets/external/iframe-api-v1.js"></script> 
     </div> 
     </div> 
    </div> 
    </div> 

Answer 1

我的建议是用jQuery做到这一点，这里有一个简单的解决方案，对不起，我不得不添加几个ID对现有代码

<div class="container"> 
<div class="jumbotron text-center"> 
    <div class="row" id="some_id"> 

    <div class="col-md-6"> 
     <h1>Heading<br>Text</h1> 
     <p>Bacon ipsum dolor sit amet ham hock cow swine meatball salami short loin. Fatback boudin sausage ham. Meatloaf pork chop corned beef, andouille t-bone pancetta flank. Drumstick meatloaf pancetta bresaola, turducken biltong jowl prosciutto ground round kevin venison beef ribs shoulder chuck ham.</p> 
     <a class="btn btn-success btn-lg" href="#">Submit</a> 
    </div> 

    <div class="col-md-6"> 
     <iframe id="iframe_id" src="http://fast.wistia.net/embed/iframe/huifu25cy3?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="440" height="248"></iframe> 
     <script src="http://fast.wistia.net/assets/external/iframe-api-v1.js"></script> 
    </div> 
    </div> 
</div> 

和这里的jQuery脚本：

// Vertical center 
function vericalCenter() { 
if ($('.container').width() > 969) { 
$('#iframe_id').css({ 
    "margin-top": ((($('#some_id').height() - $('#iframe_id').outerHeight())/2) + $('#some_id').scrollTop() + "px") 
    }); 
    }; 
}; 

$(document).ready(function(){ 
vericalCenter();    
}); 

$(window).resize(function(){   
vericalCenter();     
}); 

这里是演示，只需记住调整结果帧的宽度大于970px以便看到结果。

http://jsfiddle.net/darkosss/CzNUQ/