Como alinhar os elementos da grade no layout do fluido de bootstrap

Eu tenho um layout fluido usando a inicialização do Twitter, em que tenho uma linha com duas colunas. A primeira coluna tem muito conteúdo, que eu quero preencher normalmente. A segunda coluna apenas possui um botão e algum texto, que eu quero alinhar na parte inferior em relação à célula na primeira coluna.

Aqui está o que eu tenho:

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

Aqui está o que eu quero:

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

Eu já vi soluções que tornam o primeiro período uma altura absoluta e posicionam o segundo período em relação a ele, mas seria preferível uma solução em que eu não tivesse que especificar a altura absoluta dos meus divs. Também estou aberto a um repensar completo de como obter o mesmo efeito. Não sou casada com esse uso do andaime, apenas parecia fazer mais sentido para mim.

Esse layout como um violino:

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

Atenção: para usuários do Bootstrap 4+, considere a solução da Christophe (o Bootstrap 4 introduziu o flexbox, que fornece uma solução somente CSS mais elegante). O seguinte funcionará para versões anteriores do Bootstrap ...

Consulte http://jsfiddle.net/jhfrench/bAHfj/ para obter uma solução funcional.

//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())
});

Do lado positivo:

• no espírito das classes auxiliares existentes do Bootstrap, chamei a classepull-down .
• somente o elemento que está sendo "puxado para baixo" precisa ser classificado, então ...
• ... é reutilizável para diferentes tipos de elementos (div, span, seção, p, etc)
• é razoavelmente bem suportado (todos os principais navegadores suportam margem superior)

Agora as más notícias:

• requer jQuery
• não é, como está escrito, responsivo (desculpe)

Esta é uma solução atualizada para o Bootstrap 3 (embora deva funcionar para versões mais antigas) que usa apenas CSS / LESS:

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

Você define o tamanho da fonte como 0 na linha (caso contrário, você acaba com um espaço irritante entre as colunas), remove os flutuadores da coluna, define a exibição como inline-block, redefine o tamanho da fonte e, em seguida,vertical-align pode ser definido como qualquer coisa que você precise.

Não é necessário jQuery.

Você pode usar o flex:

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

Você precisa adicionar algum estilo para span6, smthg assim:

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

e este é o seu violino: http://jsfiddle.net/sgB3T/

Aqui também está uma diretiva angularjs para implementar essa funcionalidade

    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);
        }
      };
    }

Basta definir o pai display:flex;e o filho para margin-top:auto. Isso colocará o conteúdo filho na parte inferior do elemento pai, assumindo que o elemento pai tenha uma altura maior que o elemento filho.

Não há necessidade de tentar calcular um valor para margin-topquando você tem uma altura em seu elemento pai ou outro elemento maior que seu elemento filho de interesse no elemento pai.

Com base nas outras respostas, aqui está uma versão ainda mais responsiva. Fiz alterações na versão de Ivan para oferecer suporte a viewports com largura <768px e para melhor suporte ao redimensionamento lento da janela.

!function ($) { //ensure $ always references jQuery
    $(function () { //when dom has finished loading
        //make top text appear aligned to bottom: http://stackoverflow.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);

Isso é baseado na solução da cfx, mas em vez de definir o tamanho da fonte como zero no contêiner pai para remover os espaços entre colunas adicionados devido à exibição: bloco em linha e ter que redefini-los, eu simplesmente adicionei

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

para a coluna divs para compensar.

Bem, eu não gostava de nenhuma dessas respostas, a minha solução do mesmo problema foi adicionar o seguinte: <div>&nbsp;</div>. Portanto, no seu esquema, ficaria assim (mais ou menos), nenhuma mudança de estilo foi necessária no meu caso:

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

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