Bootstrap 3 Allinea il testo alla fine di Div

Sto cercando di ottenere un setup in Bootstrap che assomigli a questo, dove ho il testo allineato con la parte inferiore di un’immagine:

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

Così ho provato questo:

 
Logo

Some Text

Ma finisco con qualcosa che assomiglia più a questo, dove il testo è allineato in alto:

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

Ho provato alcuni trucchi di posizionamento per farlo funzionare, ma quando lo faccio, si interrompe il mobile-firstness di Bootstrap. Quando collassato alla dimensione del telefono, ho bisogno di farlo per questo:

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

Quindi farlo come un tavolo non è davvero un’opzione.

EDIT: Ecco un violino, per gentile concessione di Joseph Marikle nei commenti: D http://jsfiddle.net/6WvUY/1/

Penso che la cosa migliore sarebbe utilizzare una combinazione di posizionamento assoluto e relativo.

Ecco un violino: http://jsfiddle.net/PKVza/2/

dato il tuo html:

 
Logo

Some Text

usa il seguente CSS:

 @media (min-width: 768px ) { .row { position: relative; } .bottom-align-text { position: absolute; bottom: 0; right: 0; } } 

MODIFICA – Risolto il problema con CSS e JSFiddle per la reattività dei dispositivi mobili e la modifica dell’ID in una class.

Ho raccolto alcune idee da altre domande SO (in gran parte da qui e questa pagina css )

Violino

L’idea è di usare il posizionamento relativo e assoluto per spostare la linea verso il basso:

 @media (min-width: 768px ) { .row { position: relative; } #bottom-align-text { position: absolute; bottom: 0; right: 0; }} 

Il display:flex opzione display:flex è al momento una soluzione per far sì che il div abbia le stesse dimensioni del suo genitore. Questo rompe d’altra parte le possibilità di bootstrap di auto-linebreak su piccoli dispositivi aggiungendo la class col-sx-12 . (Questo è il motivo per cui è necessaria la query multimediale)

Puoi farlo:

CSS:

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

Quindi in HTML:

 div class="row"> 
Logo

Some Text

Ecco un’altra soluzione: http://jsfiddle.net/6WvUY/7/ .

HTML:

 
Logo

Some Text

CSS:

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

Il modo più semplice che ho provato basta aggiungere un
come nel seguente:

 

Some Text

L’unico problema è che un’ulteriore interruzione di riga (generata da quel
) viene generata quando lo schermo diventa più piccolo e si impila. Ma è veloce e semplice.