Bootstrap 3 Aligner le texte au bas de la div

J’essaie d’obtenir une configuration dans Bootstrap qui ressemble à ceci, où le texte est aligné avec le bas d’une image:

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

J’ai donc essayé ceci:

 
Logo

Some Text

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

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

J’ai essayé quelques astuces de positionnement pour le faire fonctionner, mais quand je le fais, ça brise le caractère mobile de Bootstrap. Lorsque réduit à la taille du téléphone, j’en ai besoin pour y accéder:

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

Donc, le faire comme une table n’est vraiment pas une option.

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

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

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

compte tenu de votre HTML:

 
Logo

Some Text

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 JSFiddle pour une réactivité mobile et modification de l’ID en une classe.

J’ai recueilli des idées d’autres questions SO (en grande partie d’ ici et cette page css )

Violon

L’idée est d’utiliser le 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 démarrage automatique des sauts de ligne sur les petits appareils en ajoutant la classe col-sx-12 . (C’est pourquoi la requête média est nécessaire)

Tu peux le faire:

CSS:

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

Puis en HTML:

 div class="row"> 
Logo

Some Text

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

HTML:

 
Logo

Some Text

CSS:

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

La méthode la plus simple que j’ai testée consiste à append un
comme suit:

 

Some Text

Le seul problème est qu’un saut de ligne supplémentaire (généré par ce
) est généré lorsque l’écran devient plus petit et qu’il se cumule. Mais c’est simple et rapide.