Come allineare gli elementi della griglia in basso nel layout fluido bootstrap

Ho un layout fluido usando il bootstrap di Twitter, in cui ho una riga con due colonne. La prima colonna ha molti contenuti, che voglio riempire normalmente. La seconda colonna ha solo un pulsante e del testo, che voglio allineare in basso rispetto alla cella nella prima colonna.

Ecco cosa ho:

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

Ecco cosa voglio:

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

Ho visto soluzioni che rendono il primo span un'altezza assoluta e posizionano il secondo span rispetto ad esso, ma sarebbe preferibile una soluzione in cui non dovessi specificare l'altezza assoluta dei miei div. Sono anche aperto a un ripensamento completo di come ottenere lo stesso effetto. Non sono sposato a questo uso delle impalcature, mi è solo sembrato che avesse più senso.

Questo layout come un violino:

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

Nota: per gli utenti di Bootstrap 4+, considera la soluzione di Christophe (Bootstrap 4 ha introdotto flexbox, che fornisce una soluzione più elegante solo CSS). Quanto segue funzionerà per le versioni precedenti di Bootstrap ...

Vedi http://jsfiddle.net/jhfrench/bAHfj/ per una soluzione funzionante.

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

Il lato positivo:

• nello spirito delle classi helper esistenti di Bootstrap , ho chiamato la classepull-down .
• solo l'elemento che viene "abbattuto" deve essere classificato, quindi ...
• ... è riutilizzabile per diversi tipi di elementi (div, span, section, p, ecc.)
• è abbastanza ben supportato (tutti i principali browser supportano margin-top)

Ora la cattiva notizia:

• richiede jQuery
• non è, come scritto, reattivo (scusa)

Questa è una soluzione aggiornata per Bootstrap 3 (dovrebbe funzionare per le versioni precedenti) che utilizza solo CSS / LESS:

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

Imposta la dimensione del carattere su 0 sulla riga (altrimenti ti ritroverai con uno spazio fastidioso tra le colonne), quindi rimuovi i float delle colonne, imposta la visualizzazione su inline-block, reimposta la dimensione del carattere e quindi vertical-alignpuò essere impostato su tutto ciò di cui hai bisogno.

Nessun jQuery richiesto.

Puoi usare flex:

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

Devi aggiungere un po 'di stile per span6, smthg come quello:

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

e questo è il vostro violino: http://jsfiddle.net/sgB3T/

Ecco anche una direttiva angularjs per implementare questa funzionalità

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

Basta impostare il genitore su display:flex;e il bambino sumargin-top:auto . Questo posizionerà il contenuto figlio nella parte inferiore dell'elemento genitore, assumendo che l'elemento genitore abbia un'altezza maggiore dell'elemento figlio.

Non è necessario provare a calcolare un valore per margin-topquando si ha un'altezza sull'elemento genitore o un altro elemento maggiore dell'elemento figlio di interesse all'interno dell'elemento genitore.

Sulla base delle altre risposte, ecco una versione ancora più reattiva. Ho apportato modifiche alla versione di Ivan per supportare i viewport <768px di larghezza e per supportare meglio i ridimensionamenti lenti delle finestre.

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

Questo si basa sulla soluzione di cfx, ma piuttosto che impostare la dimensione del carattere su zero nel contenitore genitore per rimuovere gli spazi intercolonna aggiunti a causa della visualizzazione: inline-block e dovendo reimpostarli, ho semplicemente aggiunto

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

alla colonna divs per compensare.

Beh, non mi piaceva nessuna di queste risposte, la mia soluzione dello stesso problema è stato quello di aggiungere questo: <div>&nbsp;</div>. Quindi nel tuo schema sarebbe simile a questo (più o meno), nel mio caso non sono state necessarie modifiche di stile:

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

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