Yocker
  1. Yocker
  3. Bootstrap 3 Allinea il testo alla fine di Div
Intereting Posts
Come evitare la follia del costruttore di dipendenza da dipendenza? Jquery: come dormire o ritardare? Come mkdir solo se una dir non esiste già? Come sovraccarico l’operatore con parentesi quadra in C #? Lettura di campioni tramite AVAssetReader Qual è il modo migliore per archiviare i file multimediali su un database? Imansible caricare il file o l’assembly ‘xxx’ o una delle sue dipendenze. Si è tentato di caricare un programma con un formato errato Usando espressioni regolari, come abbinare in maniera efficiente le stringhe tra virgolette e virgolette incorporate? Conversione delle stringhe in Javascript (decimale in binario) Come autenticare l’utente con un solo account Google su Azioni su Google? Come ridurre le dimensioni della mia applicazione iPhone? Come ottenere tutti i sottoinsiemi di un array? ThreadPoolExecutor è sicuro? Makefile con file sorgente in diverse directory Creazione del database BlackBerry SQLite: “filesystem non pronto”

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.