Wie richte ich Gitterelemente im Bootstrap-Fluid-Layout von unten aus?

Ich habe ein flüssiges Layout mit dem Bootstrap von Twitter, wobei ich eine Zeile mit zwei Spalten habe. Die erste Spalte enthält 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, die die erste Spanne zu einer absoluten Höhe machen und die zweite Spanne relativ dazu positionieren, 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, wie man den gleichen Effekt erzielt. 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/

Bitte beachten Sie: Für Benutzer von Bootstrap 4+ sollten Sie die Lösung von Christophe in Betracht ziehen (Bootstrap 4 führte die Flexbox ein, die eine elegantere Nur-CSS-Lösung bietet). Das Folgende funktioniert für frühere Versionen von Bootstrap ...

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 der vorhandenen Hilfsklassen von Bootstrap habe ich die Klasse benannt pull-down.
• Nur das Element, das "heruntergezogen" wird, muss klassifiziert werden, also ...
• ... es kann für verschiedene Elementtypen wiederverwendet werden (div, span, section, p usw.)
• 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)

Dies ist eine aktualisierte Lösung für Bootstrap 3 (sollte jedoch für ältere Versionen funktionieren), die nur CSS / LESS 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, setzen die Anzeige auf inline-block, setzen ihre Schriftgröße neu und vertical-alignkönnen dann auf eingestellt werden Alles was du brauchst.

Keine jQuery erforderlich.

Sie können flex verwenden:

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

Sie müssen einen Stil hinzufügen für span6Folgendes:

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

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

Hier ist auch eine AngularJS-Direktive zum Implementieren dieser Funktionalität

    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);
        }
      };
    }

Stellen Sie einfach die Eltern auf display:flex;und das Kind auf ein 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.

Es ist nicht erforderlich, einen Wert zu berechnen, margin-topwenn Ihr übergeordnetes Element eine Höhe oder ein anderes Element aufweist, das größer ist als das untergeordnete interessierende Element in Ihrem übergeordneten Element.

Basierend auf den anderen Antworten ist hier eine noch reaktionsschnellere Version. Ich habe Änderungen an Iwans Version vorgenommen, um Ansichtsfenster mit einer Breite von <768 Pixel und eine bessere Unterstützung für langsame Fenstergrößenänderungen 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);

Dies basiert auf der Lösung von cfx, aber anstatt die Schriftgröße im übergeordneten Container auf Null zu setzen, um die Zwischenspalten zu entfernen, die aufgrund der Anzeige hinzugefügt wurden: Inline-Block und sie 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;
}

zu der Spalte divs zu kompensieren.

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

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

.align-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}