1

ブートストラップの同じ行に 2 つのグリッド要素があります。これらの要素の 1 つは長く、1 つはそうではありません。短い方 (右側) を左側に垂直に揃えたいと思います。ここに私が欲しいものの簡単な図があります：

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

div 内のコンテンツを垂直方向にセンタリングするための解決策、さらにはフローティング div の解決策を多数見つけましたが、ブートストラップ環境では機能するものはありませんでした。

これは、開始するためのjsfiddleです。

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 に答える