Jak wyrównać elementy siatki do dołu w układzie Bootstrap Fluid

Mam układ płynny za pomocą bootstrapu Twittera, w którym mam wiersz z dwiema kolumnami. Pierwsza kolumna zawiera dużo treści, które chcę normalnie wypełnić. Druga kolumna ma tylko przycisk i tekst, który chcę wyrównać do dołu względem komórki w pierwszej kolumnie.

Oto co mam:

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

Oto, czego chcę:

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

Widziałem rozwiązania, które ustawiają pierwszą rozpiętość na absolutną wysokość i ustawiają drugą rozpiętość względem niej, ale preferowane byłoby rozwiązanie, w którym nie musiałem określać bezwzględnej wysokości moich elementów div. Jestem również otwarty na całkowite przemyślenie, jak osiągnąć ten sam efekt. Nie jestem żonaty z tym użyciem rusztowania, po prostu wydawało mi się to najbardziej sensowne.

Ten układ jako skrzypce:

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

Uwaga: dla użytkowników Bootstrap 4+, proszę rozważyć rozwiązanie Christophe'a (Bootstrap 4 wprowadził flexbox, który zapewnia bardziej eleganckie rozwiązanie tylko CSS). Poniższe informacje będą działać dla wcześniejszych wersji Bootstrap ...

Zobacz http://jsfiddle.net/jhfrench/bAHfj/, aby uzyskać działające rozwiązanie.

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

Na plus:

• w duchu istniejących klas pomocniczych Bootstrap , nazwałem tę klasę pull-down.
• tylko element, który jest „ściągany”, musi zostać sklasyfikowany, więc ...
• ... jest wielokrotnego użytku dla różnych typów elementów (div, span, section, p itd.)
• jest dość dobrze obsługiwany (wszystkie główne przeglądarki obsługują marginesy)

Teraz zła wiadomość:

• wymaga jQuery
• nie jest, jak napisano, responsywny (przepraszam)

To zaktualizowane rozwiązanie dla Bootstrap 3 (powinno jednak działać dla starszych wersji), które używa tylko CSS / LESS:

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

Ustawiasz rozmiar czcionki na 0 w wierszu (w przeciwnym razie skończysz z nieznośnym odstępem między kolumnami), a następnie usuniesz kolumny pływające, ustaw wyświetlanie inline-block, ponownie ustaw ich rozmiar czcionki, a następnie vertical-alignmożesz ustawić na wszystko czego potrzebujesz.

Nie jest wymagane jQuery.

Możesz użyć flex:

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

Musisz dodać trochę stylu span6, coś takiego:

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

a to jest twoje skrzypce: http://jsfiddle.net/sgB3T/

Oto również dyrektywa angularjs, która implementuje tę funkcjonalność

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

Po prostu ustaw rodzica na, display:flex;a dziecko na margin-top:auto. Spowoduje to umieszczenie treści podrzędnej na dole elementu nadrzędnego, przy założeniu, że element nadrzędny ma wysokość większą niż element podrzędny.

Nie ma potrzeby obliczania wartości, margin-topjeśli wysokość elementu nadrzędnego lub innego elementu jest większa niż element podrzędny będący przedmiotem zainteresowania w elemencie nadrzędnym.

Na podstawie innych odpowiedzi tutaj jest jeszcze bardziej responsywna wersja. Dokonałem zmian w wersji Ivana, aby obsługiwać rzutnie o szerokości <768px i lepiej obsługiwać powolne zmiany rozmiarów okien.

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

Jest to oparte na rozwiązaniu cfx, ale zamiast ustawiać rozmiar czcionki na zero w kontenerze nadrzędnym, aby usunąć spacje międzykolumnowe dodane z powodu wyświetlania: inline-block i konieczności ich resetowania, po prostu dodałem

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

do elementów div kolumny, aby skompensować.

Cóż, ja nie jak każda z tych odpowiedzi, moje rozwiązanie tego samego problemu było dodać to: <div>&nbsp;</div>. Więc w twoim schemacie wyglądałoby to tak (mniej więcej), w moim przypadku nie były potrzebne żadne zmiany stylu:

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

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