html - misma - ¿Cómo hago para alinear los elementos de la grilla en el diseño del fluido de arranque?

centrar contenido html

Question

Tengo un diseño fluido usando bootstrap de Twitter, donde tengo una fila con dos columnas. La primera columna tiene mucho contenido, y quiero llenar el lapso normalmente. La segunda columna solo tiene un botón y algo de texto, que quiero alinear en la parte inferior con respecto a la celda en la primera columna.

Esto es lo que tengo:

-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |
+----------------+
-----------------------------------------------

Esto es lo que quiero:

-row-fluid-------------------------------------
+-span6----------+
|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+
-----------------------------------------------

He visto soluciones que hacen que el primer tramo sea una altura absoluta y coloque el segundo tramo con respecto a él, pero sería preferible una solución en la que no tuviera que especificar la altura absoluta de mis divs. También estoy abierto a un replanteamiento completo de cómo lograr el mismo efecto. No estoy casado con este uso del andamio, simplemente parecía tener más sentido para mí.

Este diseño como un violín:

http://jsfiddle.net/ryansturmer/A7buv/3/

Answer 1

Aquí también hay una directiva angularjs para implementar esta funcionalidad

    pullDown: function() {
      return {
        restrict: ''A'',
        link: function ($scope, iElement, iAttrs) {
          var $parent = iElement.parent();
          var $parentHeight = $parent.height();
          var height = iElement.height();

          iElement.css(''margin-top'', $parentHeight - height);
        }
      };
    }

Answer 2

Bueno, no me gustó ninguna de esas respuestas, mi solución del mismo problema fue agregar esto: <div>&nbsp;</div> . Entonces, en su esquema se vería así (más o menos), no eran necesarios cambios de estilo en mi caso:

-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
|                | | +---div---+       |
| content        | | | & nbsp; |       |
| that           | | +---------+       |
| is tall        | | +-----div--------+|   
|                | | |short content   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------

Answer 3

Esta es una solución actualizada para Bootstrap 3 (aunque debería funcionar para versiones anteriores) que solo usa CSS / LESS:

http://jsfiddle.net/silb3r/0srp42pb/11/

Establece el tamaño de fuente en 0 en la fila (de lo contrario terminará con un espacio molesto entre columnas), luego elimina los flotantes de columna, establece la visualización inline-block en inline-block , restablece el tamaño de fuente y luego vertical-align se puede configurar para cualquier cosa que necesite.

No se requiere jQuery.

Answer 4

Esto se basa en la solución de cfx, pero en lugar de establecer el tamaño de fuente en cero en el contenedor principal para eliminar los espacios entre columnas debido a la pantalla: inline-block y tener que restablecerlos, simplemente agregué

.row.row-align-bottom > div {
    float: none;
    display: inline-block;
    vertical-align: bottom;
    margin-right: -0.25em;
}

a la columna divs para compensar.

Answer 5

Necesitas agregar un estilo para span6 , smthg así:

.row-fluid .span6 {
  display: table-cell;
  vertical-align: bottom;
  float: none;
}

y este es tu violín: http://jsfiddle.net/sgB3T/

Answer 6

Puedes usar flex:

@media (min-width: 768px) {
  .row-fluid {
    display: flex;
    align-items: flex-end;
  }
}

Answer 7

Según las otras respuestas, aquí hay una versión aún más receptiva. Realicé cambios de la versión de Ivan para admitir ventanas gráficas <768 px de ancho y para admitir mejor el cambio de tamaño de la ventana lenta.

!function ($) { //ensure $ always references jQuery
    $(function () { //when dom has finished loading
        //make top text appear aligned to bottom: http://.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
        function fixHeader() {
            //for each element that is classed as ''pull-down''
            //reset margin-top for all pull down items
            $(''.pull-down'').each(function () {
                $(this).css(''margin-top'', 0);
            });

            //set its margin-top to the difference between its own height and the height of its parent
            $(''.pull-down'').each(function () {
                if ($(window).innerWidth() >= 768) {
                    $(this).css(''margin-top'', $(this).parent().height() - $(this).height());
                }
            });
        }

        $(window).resize(function () {
            fixHeader();
        });

        fixHeader();
    });
}(window.jQuery);

Answer 8

Simplemente configure el padre para display:flex; y el niño a margin-top:auto . Esto colocará el contenido secundario en la parte inferior del elemento padre, suponiendo que el elemento padre tiene una altura mayor que el elemento hijo.

No es necesario tratar de calcular un valor para margin-top cuando tiene una altura en su elemento primario u otro elemento mayor que su elemento secundario de interés dentro de su elemento primario.

Answer 9

Ver http://jsfiddle.net/jhfrench/bAHfj/ para una solución de trabajo.

//for each element that is classed as ''pull-down'', set its margin-top to the difference between its own height and the height of its parent
$(''.pull-down'').each(function() {
  var $this = $(this);
  $this.css(''margin-top'', $this.parent().height() - $this.height())
});

En el lado positivo:

• en el espíritu de las clases de ayuda existentes de Bootstrap , nombré la clase pull-down .
• solo se debe clasificar el elemento que se está "derribando", así que ...
• ... es reutilizable para diferentes tipos de elementos (div, span, section, p, etc.)
• es bastante bien compatible (todos los principales navegadores admiten margen superior)

Ahora las malas noticias:

• requiere jQuery
• no es, como está escrito, receptivo (lo siento)

Answer 10

.align-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}