1

I have two grid elements on the same row in bootstrap. One of these elements is long, one is not. I'd like to vertically align the shorter one (on the right) to the one on the left. Here's a quick drawing of what I want:

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

I've found many solutions for vertically centering content in divs, and even floating divs, but none of them have worked in the bootstrap environment.

Here's a jsfiddle for getting started.

4

1 回答 1

1

示例：http ://bootply.com/80844还阅读了如何在 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)
});
于 2013-09-13T18:12:17.760 回答