it-swarm.com.de

Wie kann ich Gitterelemente in bootstrap fluid layout unten ausrichten?

Ich habe ein flüssiges Layout mit Twitter Bootstrap, wobei ich eine Zeile mit zwei Spalten habe. Die erste Spalte hat viel Inhalt, den ich normalerweise ausfüllen möchte. Die zweite Spalte enthält nur eine Schaltfläche und Text, den ich unten relativ zur Zelle in der ersten Spalte ausrichten möchte.

Folgendes habe ich:

-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |
+----------------+
-----------------------------------------------

Folgendes möchte ich:

-row-fluid-------------------------------------
+-span6----------+
|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+
-----------------------------------------------

Ich habe Lösungen gesehen, bei denen der erste Bereich eine absolute Höhe und der zweite Bereich eine relative Höhe hat, aber eine Lösung, bei der ich die absolute Höhe meiner Divs nicht angeben musste, wäre vorzuziehen. Ich bin auch offen für ein völliges Umdenken, um den gleichen Effekt zu erzielen. Ich bin nicht mit dieser Verwendung des Gerüsts verheiratet, es schien mir nur am sinnvollsten zu sein.

Dieses Layout als Geige:

http://jsfiddle.net/ryansturmer/A7buv/3/

119
Ryan

Eine funktionierende Lösung finden Sie unter http://jsfiddle.net/jhfrench/bAHfj/ .

//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
  var $this = $(this);
  $this.css('margin-top', $this.parent().height() - $this.height())
});

Auf der positiven Seite:

  • im Geiste von Bootstraps vorhandene Helferklassen habe ich die Klasse pull-down.
  • nur das Element, das "heruntergezogen" wird, muss klassifiziert werden, also ...
  • ... es ist für verschiedene Elementtypen wiederverwendbar (div, span, section, p, etc)
  • es wird ziemlich gut unterstützt (alle gängigen Browser unterstützen margin-top)

Nun die schlechte Nachricht:

  • es erfordert jQuery
  • es ist nicht, wie geschrieben, ansprechbar (sorry)
50
Jeromy French

Dies ist eine aktualisierte Lösung für Bootstrap 3 (sollte jedoch für ältere Versionen funktionieren), die nur CSS/WENIGER verwendet:

http://jsfiddle.net/silb3r/0srp42pb/11/

Sie setzen die Schriftgröße in der Zeile auf 0 (andernfalls entsteht ein lästiger Abstand zwischen den Spalten), entfernen dann die Spalten-Floats und setzen die Anzeige auf inline-block, stellen Sie die Schriftgröße neu ein und dann vertical-align kann auf alles eingestellt werden, was Sie brauchen.

Keine jQuery erforderlich.

68
cfx

Sie können flex verwenden:

@media (min-width: 768px) {
  .row-fluid {
    display: flex;
    align-items: flex-end;
  }
}
31
Christophe

Sie müssen einen Stil hinzufügen für span6, smthg so:

.row-fluid .span6 {
  display: table-cell;
  vertical-align: bottom;
  float: none;
}

und das ist deine Geige: http://jsfiddle.net/sgB3T/

27
Lukas

Hier ist auch eine anglejs-Direktive, um diese Funktionalität zu implementieren

    pullDown: function() {
      return {
        restrict: 'A',
        link: function ($scope, iElement, iAttrs) {
          var $parent = iElement.parent();
          var $parentHeight = $parent.height();
          var height = iElement.height();

          iElement.css('margin-top', $parentHeight - height);
        }
      };
    }
14
Ilya Schukin

Setzen Sie einfach das übergeordnete Element auf display:flex; Und das untergeordnete Element auf margin-top:auto. Dadurch wird der untergeordnete Inhalt am unteren Rand des übergeordneten Elements platziert, vorausgesetzt, das übergeordnete Element hat eine größere Höhe als das untergeordnete Element.

Sie müssen nicht versuchen, einen Wert für margin-top Zu berechnen, wenn Ihr übergeordnetes Element oder ein anderes Element eine Höhe aufweist, die größer ist als das interessierende untergeordnete Element in Ihrem übergeordneten Element.

5
Wagtail

Basierend auf den anderen Antworten ist hier eine noch reaktionsschneller Version. Ich habe Änderungen von Ivans Version vorgenommen, um Ansichtsfenster mit einer Breite von <768px und langsame Fenstergrößen besser zu unterstützen.

!function ($) { //ensure $ always references jQuery
    $(function () { //when dom has finished loading
        //make top text appear aligned to bottom: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
        function fixHeader() {
            //for each element that is classed as 'pull-down'
            //reset margin-top for all pull down items
            $('.pull-down').each(function () {
                $(this).css('margin-top', 0);
            });

            //set its margin-top to the difference between its own height and the height of its parent
            $('.pull-down').each(function () {
                if ($(window).innerWidth() >= 768) {
                    $(this).css('margin-top', $(this).parent().height() - $(this).height());
                }
            });
        }

        $(window).resize(function () {
            fixHeader();
        });

        fixHeader();
    });
}(window.jQuery);
4
bbodenmiller

Dies basiert auf der Lösung von cfx, aber anstatt die Schriftgröße im übergeordneten Container auf Null zu setzen, um die aufgrund der Anzeige hinzugefügten Spaltenzwischenräume zu entfernen: Inline-Block und diese zurücksetzen zu müssen, habe ich einfach hinzugefügt

.row.row-align-bottom > div {
    float: none;
    display: inline-block;
    vertical-align: bottom;
    margin-right: -0.25em;
}

um die spalte divs zu kompensieren.

3
Kirtlander

Nun, ich mochte keine dieser Antworten, meine Lösung für das gleiche Problem bestand darin, Folgendes hinzuzufügen: <div>&nbsp;</div>. In Ihrem Schema würde es also so aussehen (mehr oder weniger), in meinem Fall waren keine Stiländerungen erforderlich:

-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
|                | | +---div---+       |
| content        | | | & nbsp; |       |
| that           | | +---------+       |
| is tall        | | +-----div--------+|   
|                | | |short content   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------
0
jan b