Как выровнять элементы сетки по нижнему краю в макете bootstrap Fluid

У меня есть гибкий макет с использованием начальной загрузки Twitter, в котором у меня есть строка с двумя столбцами. В первом столбце много содержимого, которое я хочу заполнить обычным образом. Во втором столбце есть только кнопка и текст, который я хочу выровнять по нижнему краю относительно ячейки в первом столбце.

Вот что у меня есть:

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

Вот чего я хочу:

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

Я видел решения, которые делают первый диапазон абсолютной высотой и позиционируют второй диапазон относительно него, но решение, в котором мне не нужно указывать абсолютную высоту моих div, было бы предпочтительнее. Я также готов полностью переосмыслить, как добиться того же эффекта. Я не замужем за использованием строительных лесов, мне это казалось наиболее разумным.

Этот макет как скрипка:

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

Обратите внимание: для пользователей Bootstrap 4+ обратите внимание на решение Christophe (Bootstrap 4 представил flexbox, который обеспечивает более элегантное решение только для CSS). Следующее будет работать для более ранних версий Bootstrap ...

См. Http://jsfiddle.net/jhfrench/bAHfj/ для рабочего решения.

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

С положительной стороны:

• в духе существующих вспомогательных классов Bootstrap я назвал этот класс pull-down.
• только тот элемент, который «опускается», должен быть классифицирован, поэтому ...
• ... его можно использовать повторно для разных типов элементов (div, span, section, p и т. д.)
• он довольно хорошо поддерживается (все основные браузеры поддерживают маржу сверху)

А теперь плохие новости:

• это требует jQuery
• это не так, как написано, отзывчивый (извините)

Это обновленное решение для Bootstrap 3 (хотя должно работать и для более старых версий), которое использует только CSS / LESS:

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

Вы устанавливаете font-size равным 0 в строке (в противном случае вы получите неприятное пространство между столбцами), затем удаляете плавающие столбцы, устанавливаете отображение inline-block, повторно устанавливаете их размер шрифта, а затем vertical-alignможете установить Что вам нужно.

Не требуется jQuery.

Вы можете использовать flex:

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

Вам нужно добавить стиль для span6чего-то вроде этого:

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

и это ваша скрипка: http://jsfiddle.net/sgB3T/

Вот также директива angularjs для реализации этой функции

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

Просто установите для родителя значение, display:flex;а для ребенка - margin-top:auto. Это поместит дочерний контент в нижнюю часть родительского элемента, если родительский элемент имеет высоту больше, чем дочерний элемент.

Нет необходимости пытаться вычислить значение, margin-topкогда у вас есть высота родительского элемента или другого элемента, превышающего ваш интересующий дочерний элемент в родительском элементе.

Основываясь на других ответах, это еще более отзывчивая версия. Я внес изменения в версию Ивана для поддержки видовых экранов шириной <768 пикселей и для лучшей поддержки медленного изменения размеров окон.

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

Это основано на решении cfx, но вместо того, чтобы устанавливать нулевой размер шрифта в родительском контейнере для удаления межстолбцовых пространств, добавленных из-за display: inline-block и необходимости их сброса, я просто добавил

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

в столбцы div для компенсации.

Ну, я не так, как любой из этих ответов, мое решение той же проблемы в том, чтобы добавить следующее: <div>&nbsp;</div>. Итак, в вашей схеме это будет выглядеть так (более или менее), в моем случае никаких изменений стиля не потребовалось:

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

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