Comment puis-je bas-alignement de la grille des éléments dans le bootstrap design fluide

Question

J'ai un fluide de mise en page à l'aide de Twitter bootstrap, où j'ai une ligne avec deux colonnes. La première colonne a beaucoup de contenu, je veux remplir la durée normalement. La deuxième colonne a juste un bouton et le texte, que je tiens à bas aligner 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 rendent la première span absolue la hauteur et la position de la deuxième travée par rapport à elle, mais une solution où je n'avais pas de spécifier la hauteur absolue de mes divs serait préférable. Je suis aussi ouvert à une refonte complète de la façon d'obtenir le même effet. Je ne suis pas marié avec cette utilisation de l'échafaudage, il semblait juste de faire le plus de sens pour moi.

Cette disposition comme un charme:

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

Answer 1

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

//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() {
    $(this).css('margin-top', $(this).parent().height()-$(this).height())
});

Sur le côté positif:

• dans l'esprit de Bootstrap existants des classes d'aide, j'ai nommé la classe pull-down.
• seulement l'élément qui est "tiré vers le bas" doit être classé, donc...
• ...il est réutilisable pour les différents types d'éléments (div, span, section, p, etc)
• c'est assez bien pris en charge (tous les principaux navigateurs prennent en charge margin-top)

Maintenant la mauvaise nouvelle:

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

Answer 2

Vous avez besoin d'ajouter un peu de style pour span6, smthg comme ça:

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

et c'est votre violon: http://jsfiddle.net/sgB3T/

Answer 3

Voici aussi un angularjs directive pour mettre en œuvre 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);
        }
      };
    }

Answer 4

Sur la base des autres réponses ici, est encore plus sensible version. J'ai fait des modifications de Ivan version à l'appui de fenêtres <768px de large et de mieux appuyer la lenteur de la fenêtre est redimensionnée.

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

Answer 5

basé sur Jérôme le français et l'sweaver2112 réponse

c'est ce que j'ai utilisé

var resizeTimer;
$(window).resize(function () {
    clearTimeout(resizeTimer);
    resizeTimer =
            setTimeout(
                    $('.pull-down').each(
                            function () {
                                $(this).css('margin-top', 0);
                                $(this).css('margin-top', $(this).parent().height() - $(this).height())
                            })
                    , 100);
});