css - poner - Bootstrap 3 alinea el texto al fondo de Div

navbar bootstrap brand

Question

Estoy tratando de obtener una configuración en Bootstrap que se vería así, donde tengo texto alineado con la parte inferior de una imagen:

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

Así que probé esto:

<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>

Pero termino con algo que se parece más a esto, donde el texto está alineado al principio:

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

He intentado algunos trucos de posicionamiento para que funcione, pero cuando lo hago, rompe la primordialidad móvil de Bootstrap. Cuando colapsó al tamaño del teléfono, necesito que encaje en esto:

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

Hacerlo como una mesa realmente no es una opción.

EDITAR: Aquí hay un violín, cortesía de Joseph Marikle en los comentarios: D http://jsfiddle.net/6WvUY/1/

Answer 1

Aquí hay otra solución: 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;
}

Answer 2

Creo que tu mejor opción sería usar una combinación de posicionamiento absoluto y relativo.

Aquí hay un violín: http://jsfiddle.net/PKVza/2/

dado tu 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>

usa el siguiente CSS:

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

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

EDITAR - Corregí CSS y JSFiddle para la capacidad de respuesta móvil y cambié el ID a una clase.

Answer 3

La forma más fácil que he probado solo agrega una <br> como se <br> a continuación:

<div class="col-sm-6">
    <br><h3><p class="text-center">Some Text</p></h3>
</div>

El único problema es que se genera un salto de línea adicional (generado por esa <br> ) cuando la pantalla se hace más pequeña y se acumula. Pero es rápido y simple.

Answer 4

Puedes hacerlo:

CSS:

#container {
    height:175px;
}

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

Luego 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>

Answer 5

Recopilé algunas ideas de otra pregunta SO (principalmente desde here y en esta página de CSS )

Fiddle

La idea es usar posicionamiento relativo y absoluto para mover la línea hacia abajo:

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

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

La opción display:flex es en este momento una solución para hacer que el div obtenga el mismo tamaño que su principal. Esto rompe por otro lado las posibilidades de arranque para auto-linebreak en dispositivos pequeños mediante la adición col-sx-12 clase col-sx-12 . (Esta es la razón por la cual la consulta de medios es necesaria)