Question

我在bootstrap的同一行有两个网格元素。其中一个元素很长，一个不是。我想将较短的一个（右侧）与左侧的一个垂直对齐。这是我想要的快速绘图：

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

我找到了许多解决方案，用于垂直居中div中的内容，甚至浮动div，但它们都没有在引导环境中工作。

这是开始时的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)
});

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

1 个答案: