Comment aligner les éléments de la grille par le bas dans une mise en page fluide bootstrap

J'ai une mise en page fluide utilisant le bootstrap de Twitter, dans lequel j'ai une ligne avec deux colonnes. La première colonne a beaucoup de contenu, que je veux remplir normalement. La deuxième colonne a juste un bouton et du texte, que je veux aligner en bas par rapport à la cellule de la première colonne.

Voici ce que j'ai:

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

Voici ce que je veux:

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

J'ai vu des solutions qui font de la première travée une hauteur absolue et positionnent la deuxième travée par rapport à elle, mais une solution où je n'ai pas besoin de spécifier la hauteur absolue de mes divs serait préférée. Je suis également ouvert à une réflexion complète sur la manière d'obtenir le même effet. Je ne suis pas marié à cette utilisation de l'échafaudage, cela me semblait le plus logique.

Cette disposition comme un violon:

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

Remarque: pour les utilisateurs de Bootstrap 4+, veuillez considérer la solution de Christophe (Bootstrap 4 a introduit flexbox, qui fournit une solution plus élégante uniquement en CSS). Ce qui suit fonctionnera pour les versions antérieures de Bootstrap ...

Voir http://jsfiddle.net/jhfrench/bAHfj/ pour une solution fonctionnelle.

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

Du coté positif:

• dans l'esprit des classes d'assistance existantes de Bootstrap , j'ai nommé la classe pull-down.
• seul l'élément qui est «abattu» doit être classé, donc ...
• ... il est réutilisable pour différents types d'éléments (div, span, section, p, etc.)
• il est assez bien pris en charge (tous les principaux navigateurs prennent en charge margin-top)

Maintenant les mauvaises nouvelles:

• il nécessite jQuery
• ce n'est pas, tel qu'il est écrit, réactif (désolé)

Ceci est une solution mise à jour pour Bootstrap 3 (devrait fonctionner pour les anciennes versions) qui utilise uniquement CSS / LESS:

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

Vous définissez la taille de la police sur 0 sur la ligne (sinon vous vous retrouverez avec un espace embêtant entre les colonnes), puis supprimez les flottants de colonne, définissez l'affichage sur inline-block, redéfinissez leur taille de police, puis vertical-alignpouvez être défini sur tout ce dont tu as besoin.

Aucun jQuery requis.

Vous pouvez utiliser flex:

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

Vous devez ajouter du style pour span6, smthg comme ça:

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

et voici votre violon: http://jsfiddle.net/sgB3T/

Voici également une directive angularjs pour implémenter cette fonctionnalité

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

Réglez simplement le parent sur display:flex;et l'enfant sur margin-top:auto. Cela placera le contenu enfant au bas de l'élément parent, en supposant que l'élément parent a une hauteur supérieure à l'élément enfant.

Il n'est pas nécessaire d'essayer de calculer une valeur margin-toplorsque vous avez une hauteur sur votre élément parent ou un autre élément supérieur à votre élément enfant d'intérêt dans votre élément parent.

Sur la base des autres réponses, voici une version encore plus réactive. J'ai apporté des modifications à la version d'Ivan pour prendre en charge les fenêtres <768px de large et pour mieux prendre en charge les redimensionnements de fenêtres lents.

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

Ceci est basé sur la solution de cfx, mais plutôt que de définir la taille de la police à zéro dans le conteneur parent pour supprimer les espaces inter-colonnes ajoutés à cause de l'affichage: bloc en ligne et devoir les réinitialiser, j'ai simplement ajouté

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

à la colonne divs pour compenser.

Eh bien, je ne l' ai pas comme l' une de ces réponses, ma solution du même problème était d'ajouter ceci: <div>&nbsp;</div>. Donc, dans votre schéma, cela ressemblerait à ceci (plus ou moins), aucun changement de style n'était nécessaire dans mon cas:

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

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