css - 如何在 bootstrap 3 中垂直对齐网格元素的内容？

Question

我在 Bootstrap 的同一行上有两个网格元素。这些元素之一是长的，一个不是。我想将较短的(右侧)与左侧的垂直对齐。这是我想要的快速绘图:

+------------------+------------------+
|                  |                  |
|      This        |                  |
|    Column        |                  |
|      is          |                  |
|     full         |                  |
|      of          +------------------+
|     lots         |  Right column    |
|      of          |  text goes here  |
|     text         |                  |
|      and         +------------------+
|     thus         |                  |
|      is          |                  |
|    taller        |                  |
|     than         |                  |
|     the          |                  |
|    right one!    |                  |
+------------------+------------------+

我发现了很多在 div 甚至 float div 中垂直居中内容的解决方案，但它们都无法在 Bootstrap 环境中工作。

这是一个 jsfiddle开始。

Answer 1

示例:http://bootply.com/80844另请阅读 How to vertically center content with variable height within a div?

html

<div class="container">

<div class="row">
    <div class="col-xs-6 first">
    <p>Donec. Platea convallis. Tempor risus viverra ligula posuere sociis sociis lorem donec hendrerit nisl torquent sodales morbi montes. Luctus. Conubia, iaculis erat magna et ac pellentesque rhoncus erat class adipiscing ligula quam lectus suspendisse. Nibh laoreet malesuada mollis convallis sociis senectus curabitur orci. Egestas cursus curabitur laoreet tortor ut dolor vitae felis senectus turpis, non hendrerit, est. Sollicitudin ante congue, auctor magna nascetur magna aliquet bibendum nunc libero. Velit pretium curae; praesent iaculis malesuada ante iaculis torquent volutpat bibendum non, eros arcu diam tortor vehicula per. Ut. Nulla Natoque.</p>

<p>Pharetra. Sodales etiam at lobortis nec, interdum. Hendrerit sodales duis habitant donec quis facilisis morbi nec eget pellentesque venenatis vivamus pulvinar volutpat nibh adipiscing fusce mus malesuada hendrerit vestibulum primis. Nunc lacus montes laoreet lacinia integer at placerat aliquet nostra facilisi sem elementum aliquam aliquam sociis lobortis risus aenean in. Libero primis id non curabitur porttitor consequat nec senectus sodales tempor faucibus mus ut ultricies felis sociis proin pretium malesuada non urna pulvinar duis. Dolor lectus. Sem semper dolor fusce dapibus Suscipit. Dictum, dis penatibus aliquam lectus aenean cubilia dolor amet tempus vulputate torquent maecenas suscipit vitae. Nibh tellus consectetuer, inceptos potenti fames egestas ridiculus commodo massa pharetra velit, nostra pellentesque taciti porta id rhoncus habitasse tellus eleifend.</p>

<p>Lacus sapien malesuada. Sit euismod Ultricies ac consequat class nisl gravida montes lacus nullam. Felis nisl nostra pharetra taciti laoreet. Ac donec et fames. Purus enim sollicitudin accumsan habitant, dapibus aliquam scelerisque leo rutrum phasellus adipiscing sit leo porttitor augue. Pharetra gravida nunc nibh per donec tempor auctor felis sem congue non pede suspendisse sapien pede volutpat consectetuer, montes pharetra congue egestas sem cursus hymenaeos lorem adipiscing gravida id consectetuer laoreet erat senectus. Ridiculus eu sit Vitae montes, purus vehicula tristique pellentesque. Facilisi. Neque habitasse metus maecenas dapibus ante rhoncus eros consequat orci.</p>
    </div>
    <div class="col-xs-6 second">
        nothing
    </div>
</div>  

</div>

javascript

$(window).load(function() {   
$('.second').css('margin-top',($('.first').height()-$('.second').height())/2)
});