So toll das Gridsystem von Bootstrap auch ist – jeder, der es einsetzt, wird auch mit den unerwünschten Effekten dieses Systemes konfrontiert.
Befinden sich mehrere responsive Columns mit unterschiedlichem hohem Inhalt in einer Row, dann entsteht eine Treppenstruktur, sobald die Seite zusammengeschoben wird:
Mit dem adjustColumnsOfRow() Plugin kann dieses Verhalten übersteuert werden.
Nach erfolgter JQuery-Initialisierung kann das Plugin folgendermaßen aufgerufen werden.
$(document).ready(function () { // Adjusts height of each column in all bootstrap rows $("div.row").adjustColumnsOfRow(); });
Die Höhe der einzelnen Columns wird beim Resizen der Seite automatisch neu berechnet.
Mit Hilfe dieses JQuery Funktionsprototypen kann die Funktion *adjustColumnsOfRow()* als typisches JQuery-Plugin initialisiert werden.
/* ===================================================================== */ /* Adjust height of responsive Bootstrap-Columns automatically */ /* (C)2014-2015 INSIGMA IT Engineering GmbH; LBr */ /* v1.00 */ /* ===================================================================== */ (function ($) { $.fn.adjustColumnsOfRow = function (options, noAttach) { /// <summary>Setzen einer einheitlichen Höhe von responsiven Bootstrap-Columns in einer Bootstrap-Row</summary> /// <param name="options" type="Array" optional="true"> /// Einstellungen /// </param> /// <param name="noAttach" type="Boolean" optional="true"> /// For internal use only! /// </param> var settings = $.extend({ columnSelector: "div[class^='col-']" }, options); $.each(this, function (idx) { try { var $cols = $(this).find(settings.columnSelector); var h = 0; $($cols).each(function () { $(this).css({ "height": "auto" }); if ($(this).outerHeight() > h) { h = $(this).outerHeight(); } $(this).css({ "height": h }); }); $($cols).each(function () { $(this).css({ "height": h }); }); if (!noAttach) { $(window).on("resize", { rows: this, settings: options }, function (e) { $(e.data.rows).adjustColumnsOfRow(e.data.settings, true); }); } } catch (exc) { alert("adjustColumnsOfRow(): " + exc); } }); return this; }; }(jQuery));