pionowe wyrównanie w przęsłach Bootstrap za

Question

Czy jest jakaś praca wokół pionowego ułożenia elementów lub tekstów w bootstrap rozpiętości w stosunku do innych przęseł

Dla np. jeśli mam wiersz i przęseł jak ten

<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> 

Wygląda to

Więc jest jakiś sposób, aby pokazać „Opis” pionowo centrum wysokości kolejnego segmentu jest?

Answer 1

Jeśli próbujesz pionowo wyśrodkować element dla niektórych rozmiarach ekranu zawsze można użyć kwerendy multimedialne, takie jak:

/*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

Można wypróbować niektóre absolute centering tricks with CSS. Na przykład, jeśli chcesz: 1) zadeklarować wysokość div, która ma być wyśrodkowana, i 2) Dokonaj swojego .row-fluidposition: relative;, a następnie prawdopodobnie this sample could work for you.

wynikały następujące 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> 

i CSS:

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

Answer 4

Pracowałem wiele na ten temat, i proste rozwiązanie za pomocą jquery pokazany jest tutaj!

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

}); 
</script> 

Działa i testowałem to również. Jeśli podoba mi się moja odpowiedź, zagłosuj na mnie.

Answer 5

W Bootstrap nie ma przepisu dotyczącego takiego problemu. Jest zależny od implantacji. Można jednak napisać regułę css, mówiąc, że jeśli następny div przekroczy wysokość poprzedniego div wyrównaj poprzedni div na wysokości środkowej następnego div & zastosuj tę klasę do div, gdziekolwiek chcesz tego rodzaju zachowania.

Answer 6

Sprawdź to rozwiązanie bez skryptów.

<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> 

kod w akcji: jsFiddle

Wystarczy usunąć stylizację inline i umieścić ją w pliku css.

Answer 7

try display: table; dla rodziców i dla dziecka display: table-cell;

JSFiddle