Dzisiaj chcemy powiedzieć o jednym z popularnych problemów powiązanych z Bootstrap. Jeżeli mamy siatkę z 3 kolumn a elementów w niej więcej czym 3, to 4 element idzie w następny rząd. Problem polega na tym że ten 4 element będzie przyklejony do elementu na górze i wygląda to nie bardzo estetycznie.
Żeby załatwić ten problem trzeba skorzystać się z jQuery. Dla konteneru siatki dodajemy klasę .row-margin. Dalej wpisujemy w plik js następne linijki.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | jQuery(function($){ $(document).ready(function(){ function rowMargin() { $(".row-margin").each(function () { var thisOffset = $(this).offset().top; $(this).find("> *").each(function () { var thisMargin = parseInt($(this).css("marginTop")); if ($(this).offset().top - thisMargin > thisOffset) { $(this).addClass("margin-top"); } else { $(this).removeClass("margin-top"); } }); }); } rowMargin(); $(window).load(function(){ $(window).resize(); }); $(window).resize(function(){ rowMargin(); }); }); }); |
Dodatkowo w stylach dopisujemy margin do klasy .margin-top
1 2 3 | .margin-top{ margin-top: 25px; } |