Bootstrap 3 Aligner le Texte en Bas de la Div

Je vais essayer d'obtenir un programme d'installation dans le Bootstrap qui ressemblerait à quelque chose comme ça, où j'ai de texte aligné avec le bas de l'image:

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

J'ai donc 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 à de ce, où le texte est alignée en haut:

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

J'ai essayé quelques positionnement des astuces pour le faire fonctionner, mais lorsque je fais cela, il rompt le mobile-firstness de Bootstrap. Lorsque s'est effondré vers le bas pour téléphone-taille, j'en ai besoin pour l'aligner sur ce:

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

Ainsi qu'une table n'est pas vraiment une option.

EDIT: Ici un violon, avec l'aimable autorisation de Joseph Marikle dans les commentaires 😀 http://jsfiddle.net/6WvUY/1/

pour ceux d'entre vous qui cherchent à expérimenter avec cela, voici un violon: jsfiddle.net/6WvUY/1
Est-ce que votre image ont une hauteur fixe?
Non, il n'est pas.
Cette question vraiment vieux, mais dans Bootsrap 4, il est maintenant align-bottom

InformationsquelleAutor Pharylon | 2014-07-02

css twitter-bootstrap-3

62

Je pense que votre meilleur pari serait d'utiliser une combinaison de la valeur absolue et le positionnement relatif.

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

donné votre code 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>
```
utiliser le code CSS suivant:
```
@media (min-width: 768px ) {
  .row {
      position: relative;
  }

  .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
```
ÉDITION - Correction CSS et JSFiddle pour mobile réactivité et changé l'ID d'une classe.
- Je préfère les classes d'id pour des choses comme ça, mais c'est le mieux que je pouvais venir avec de trop.
- Je suis également d'accord avec @JosephMarikle qu'une classe serait mieux qu'un ID, comme il serait réutilisable sur la page.
- Est-il une raison pourquoi .ligne doit être globale? J'ai ajouté une classe supplémentaire pour la définition comme .bottom-align.row de sorte qu'il n'affecte que cette ligne, plutôt que de toutes les lignes sur la page.
- il n'y a pas une bonne raison pour cela. Votre solution est bonne si vous ne voulez pas qu'elle s'applique à tous les .row's
- je trouve que cela ne fonctionne pas dans un modal
InformationsquelleAutor Cody Reichert
7

J'ai recueilli quelques idées à d'autres DONC, la question (en grande partie des ici et cette page css)

Violon

L'idée est d'utiliser relatif et absolu de positionnement pour déplacer votre ligne vers le bas:
```
@media (min-width: 768px ) {
.row {
    position: relative;
}

#bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }}
```
La display:flex option est pour le moment une solution pour rendre la div obtenir la même taille que son parent. Cela rompt d'autre part, le bootstrap possibilités d'auto-saut de ligne sur de petits appareils en ajoutant col-sx-12 classe. (C'est pourquoi les media query est nécessaire)

InformationsquelleAutor Daniel

Vous pouvez faire ceci:

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>

EDIT: ajouter le <

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

InformationsquelleAutor DRD

-12

La façon la plus simple que j'ai testé il suffit d'ajouter une <br> comme dans l'exemple suivant:
```
<div class="col-sm-6">
    <br><h3><p class="text-center">Some Text</p></h3>
</div>
```
Le seul problème est que d'un supplémentaire de saut de ligne (généré par le <br>) est généré lorsque l'écran est plus petit et il empile. Mais il est simple et rapide.
- C'est une MAUVAISE solution, il ne s'aligne pas correctement si la hauteur n'est pas exactement une ligne.
InformationsquelleAutor Jason

Vous devez vous connecter pour publier un commentaire.