web-dev-qa-db-fra.com

Bootstrap 3: Comment aligner le contenu de la colonne sur le bas de la ligne

J'ai une ligne dans Bootstrap 3 et 3 colonnes dans cette ligne. Je veux aligner deux des colonnes sur le bas de la ligne et garder la première colonne en haut. Quand j'utilise le approche traditionnelle avec position relative dans le parent et absolu pour les deux colonnes, j'obtiens un comportement étrange qui, je suppose, est dû à quelque chose dans le bootstrap de Twitter.

http://www.bootply.com/125735

L'absolu force toutes les colonnes les unes sur les autres, quelqu'un peut-il m'aider? Le résultat final est d'avoir quelque chose comme:

http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/

Merci

csscss3twitter-bootstraptwitter-bootstrap-3
28
user1347026

Vous pouvez utiliser display: table-cell et vertical-align: bottom sur les 2 colonnes que vous souhaitez aligner en bas, comme suit:

.bottom-column
{
    float: none;
    display: table-cell;
    vertical-align: bottom;
}

Exemple de travail ici .

En outre, cela pourrait être un possible question en double .

40
Marius Stănescu

Aligner verticalement en bas et retirer le flotteur semble fonctionner. J'ai ensuite eu un problème de marge, mais le -2px les empêche de se faire abaisser (et ils ne se chevauchent toujours pas)

.profile-header > div {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  margin: -2px;
}
.profile-header {
  margin-bottom:20px;
  border:2px solid green;
  display: table-cell;
}
.profile-pic {
  height:300px;
  border:2px solid red;
}
.profile-about {
  border:2px solid blue;
}
.profile-about2 {
  border:2px solid pink;
}

Exemple ici: http://www.bootply.com/125740#

7
Tom Prats

Lorsque vous travaillez avec bootsrap, vous rencontrez généralement trois problèmes principaux:

  1. Comment placer le contenu de la colonne en bas?
  2. Comment créer une galerie à plusieurs rangées de colonnes de hauteur égale dans un .row?
  3. Comment centrer les colonnes horizontalement si leur largeur totale est inférieure à 12 et si la largeur restante est impaire?

Pour résoudre les deux premiers problèmes, téléchargez ce petit plugin https://github.com/codekipple/conformity

Le troisième problème est résolu ici http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

Code commun

<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>

1. Aligner le contenu de la colonne en bas

<div class="row row-conformity">
    <div class="col-sm-3">
        I<br>create<br>highest<br>column
    </div>
    <div class="col-sm-3">
        <div class="to-bottom">
            I am on the bottom
        </div>
    </div>
</div>

2. Galerie de colonnes d'égale hauteur

<div class="row row-conformity">
    <div class="col-sm-4">We all have equal height</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
</div>

3. Alignement horizontal des colonnes au centre (moins de 12 unités de col)

<div class="row row-centered">
    <div class="col-sm-3">...</div>
    <div class="col-sm-4">...</div>
</div>

Toutes les classes peuvent travailler ensemble

<div class="row row-conformity row-centered">
    ...
</div>
4
Vlad Alivanov

Je ne sais pas pourquoi mais pour moi la solution proposée par Marius Stanescu casse la spécificité de col (un col-md-3 suivi d'un col-md-4 prendra l'intégralité des douze rangées)

J'ai trouvé une autre solution de travail:

.bottom-column 
{
   display: inline-block;
   vertical-align: middle;
   float: none;
}
2
Antt