web-dev-qa-db-fra.com

Bootstrap 3 Aligner le texte avec le bas de la div

J'essaie d'obtenir une configuration dans Bootstrap qui ressemblerait à ceci: le texte est aligné sur le bas de l'image:

================================================
|                                              |
|    ####################                      |
|    ##THIS IS AN IMAGE##                      |
|    ####################   ...And some text!  |
|                                              |
================================================

Alors j'ai essayé ceci:

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

Mais je me retrouve avec quelque chose qui ressemble plus à ceci, où le texte est aligné en haut:

================================================
|                                              |
|    ####################  ...And some text!   |
|    ##THIS IS AN IMAGE##                      |
|    ####################                      |
|                                              |
================================================

J'ai essayé quelques astuces de positionnement pour que cela fonctionne, mais lorsque je le fais, cela brise le caractère primitif de Bootstrap pour les appareils mobiles. Une fois réduit à la taille d'un téléphone, il faut que je l'accroche à ceci:

==========================
|                        |
|  ####################  |
|  ##THIS IS AN IMAGE##  |
|  ####################  |
|                        |
|   ...And some text!    |
|                        |
==========================

Donc, le faire en tant que table n'est vraiment pas une option.

EDIT: Voici un violon, gracieuseté de Joseph Marikle dans les commentaires: D http://jsfiddle.net/6WvUY/1/

csstwitter-bootstrap-3
42
Pharylon

Je pense que votre meilleur choix serait d’utiliser une combinaison de positionnement absolu et relatif.

Voici un violon: http://jsfiddle.net/PKVza/2/

étant donné votre html:

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="bottom-align-text col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

utilisez le CSS suivant:

@media (min-width: 768px ) {
  .row {
      position: relative;
  }

  .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

EDIT - Correction de CSS et de JSFiddle pour la réactivité mobile et modification de l’ID en classe.

60
Cody Reichert

J'ai recueilli quelques idées d'autres SO questions (principalement de ici et cette page css )

violon

L'idée est d'utiliser un positionnement relatif et absolu pour déplacer votre ligne vers le bas:

@media (min-width: 768px ) {
.row {
    position: relative;
}

#bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }}

L'option display:flex est actuellement une solution pour que la div ait la même taille que son parent. Cela rompt par contre les possibilités de bootstrap de couper automatiquement la ligne sur les petits périphériques en ajoutant la classe col-sx-12. (C'est pourquoi la requête multimédia est nécessaire)

7
Daniel

Tu peux le faire:

CSS:

#container {
    height:175px;
}

#container h3{
    position:absolute;
    bottom:0;
    left:0;
}

Puis en HTML:

div class="row">
    <div class="col-sm-6">
        <img src="//placehold.it/600x300" alt="Logo" />
    </div>
    <div id="container" class="col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>
6
Brandon Nguyen

Voici une autre solution: http://jsfiddle.net/6WvUY/7/ .

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <img src="//placehold.it/600x300" alt="Logo" class="img-responsive"/>
        </div>
        <div class="col-sm-6">
            <h3>Some Text</h3>
        </div>
    </div>
</div>

CSS:

.row {
    display: table;
}

.row > div {
    float: none;
    display: table-cell;
}
3
DRD