Вертикальное выравнивание в пролетах Bootstrap в

Question

Есть ли работа вокруг для вертикального выравнивания элементов и текстов в загрузчике пролеты по сравнению с другими пролетами

Для например. если у меня есть ряд и пролеты, как этот

<div class="row-fluid"> 
    <div class="span3" style="background-color:lightblue">Description</div> 
    <div class="span9" style="background-color:pink"> 
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum .... 
    </div> 
</div> 

Похоже, что этот

Так есть ли способ, чтобы показать «Описание» вертикально центр высоты следующего SPAN в?

Answer 1

Если вы пытаетесь вертикально центрировать элемент для определенных размеров экрана, вы всегда можете использовать медиа-запросы, такие как:

/*tablet*/ 
@media (min-width: 768px) and (max-width: 979px) { 
    #logo{ 
    margin-top:70px; 
    } 
} 
/*desktop*/ 
@media (max-width: 979px) { 
    #logo{ 
    margin-top:20px; 
    } 
} 
/*large desktop*/ 
@media (min-width: 1200px) { 
    #logo{ 
    margin-top:0; 
    } 
} 

Answer 2

$('.row').each(function() { 
    var rowHeight = $(this).height(); 
    $(this).find("[class^='span']").each(function() { 
    if ($(this).height() < rowHeight-20) { 
     var odstep = (rowHeight - $(this).height())/2 ; 
     $(this).css("padding-top", odstep); 
    } 
    }); 
}); 

Answer 3

Вы можете попробовать некоторые absolute centering tricks with CSS. Например, если вы хотите: 1) объявить высоту div для центровки, и 2) Сделайте .row-fluidposition: relative;, а затем, возможно, this sample could work for you.

В результате в следующем DOM:

<div class="row-fluid relative"> 
    <div class="span3"> 
     <div class="vercenter" style="background-color:lightblue">Description</div> 
    </div> 
    <div class="span9" style="background-color:pink">Lorem Ipsum...</div> 
</div> 

И CSS:

.relative { 
    position: relative; 
} 
.vercenter { 
    height: 1.5em; 
    margin: auto; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    position: absolute; 
} 

Answer 4

Я много работал над этим, и простое решение, с помощью jquery показано здесь!

<script> 
$(document).ready(function(){ 
    var relheight=$('.span9').height()/2; 
    $('.span3').css('margin-top', relheight) ; 

}); 
</script> 

Это работает, и я тестировал его также. Если вам нравится мой ответ, проголосуйте за меня

Answer 5

В Bootstrap нет такого положения. Он зависит от имплантации. Однако вы можете написать правило css, говорящее, что если следующий div превышает высоту предыдущего div, выровняйте предыдущий div на центральной высоте следующего div &, применив этот класс к divs везде, где вы хотите такого поведения.

Answer 6

Проверьте это бесплатное решение без скрипта.

<div class="row-fluid"> 
    <div class="span3" style="background-color:lightblue;margin:0px auto;float:none;">Description</div> 
    <div class="span9" style="background-color:pink;clear:both;margin:0px auto;float:none;"> 
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum .... 
    </div> 
</div> 

Код в действии: jsFiddle

Просто удалите встроенный стиль и поместить его в файл CSS.

Answer 7

попытка display: table; для родителей и display: table-cell; для ребенка

JSFiddle