Comment aligner le bas des éléments de la grille dans bootstrap layout fluide
J'ai une mise en page fluide utilisant le bootstrap de Twitter, dans laquelle j'ai une rangée avec deux colonnes. La première colonne a beaucoup de contenu, ce 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 à celle-ci, mais une solution pour laquelle je n'ai pas à spécifier la hauteur absolue de mes divs serait préférable. 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 tout à fait logique.
Cette mise en page en tant que violon:
Voir http://jsfiddle.net/jhfrench/bAHfj/ pour une solution opérationnelle.
//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 de classes d'assistance existantes de Bootstrap , j'ai nommé la classe
pull-down. - seul l'élément qui est "abaissé" doit être classé, alors ...
- ... il est réutilisable pour différents types d'éléments (div, span, section, p, etc.)
- il est assez bien supporté (tous les principaux navigateurs supportent margin-top)
Maintenant les mauvaises nouvelles:
- il faut jQuery
- ce n'est pas, comme écrit, sensible (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 sur 0 sur la ligne (sinon, vous vous retrouverez avec un espace gênant entre les colonnes), vous supprimerez les flotteurs de colonne, vous définissez l'affichage sur inline-block, vous réglez de nouveau la taille de la police, puis alors vertical-align peut être réglé sur tout ce dont vous avez besoin.
Pas de 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, 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);
}
};
}
Il suffit de définir 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 à 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.
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 d'affichage d'une largeur inférieure à 768 pixels et pour mieux prendre en charge les redimensionnements lents des fenêtres.
!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: inline-block et devant avoir à 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 n’ai aimé aucune de ces réponses, ma solution au même problème a été d’ajouter ceci: <div> </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 ||
| | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------