Comment puis-je aligner les éléments de grid en bas de la disposition fluide bootstrap

J’ai une disposition fluide en utilisant le bootstrap de Twitter, dans lequel j’ai une ligne avec deux colonnes. La première colonne contient 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 dans 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 scope une hauteur absolue et positionnent la seconde par rapport à celle-ci, mais une solution où je n’aurais pas eu à spécifier la hauteur absolue de mes divs serait préférable. Je suis également prêt à repenser complètement la manière d’obtenir le même effet. Je ne suis pas marié à cette utilisation de l’échafaudage, cela semblait juste me sembler le plus logique.

Cette mise en page comme un violon:

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

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() { 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 “démoli” 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 les marges supérieures)

Maintenant la mauvaise nouvelle:

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

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

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

Vous définissez la taille de la police à 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 intégré, redéfinissez leur taille de police, puis vertical-align peut être réglé sur tout ce dont vous avez besoin.

Aucun jQuery requirejs.

Vous pouvez utiliser flex:

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

Vous devez append du style à span6 , comme ça:

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

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

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

  pullDown: function() { return { ressortingct: 'A', link: function ($scope, iElement, iAttrs) { var $parent = iElement.parent(); var $parentHeight = $parent.height(); var height = iElement.height(); iElement.css('margin-top', $parentHeight - height); } }; } 

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 <768 pixels de large et mieux prendre en charge les redimensionnements de fenêtre 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 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: inline-block 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; } 

Il suffit de définir le parent pour display:flex; et l’enfant à 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 à celle de l’élément enfant.

Il n’est pas nécessaire d’essayer de calculer une valeur pour margin-top lorsque 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.

Eh bien, je n’ai aimé aucune de ces réponses, ma solution du même problème a été d’append ceci:

 

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