부트 스트랩 유동 레이아웃에서 그리드 요소를 하단 정렬하는 방법

저는 트위터의 부트 스트랩을 사용하는 유동적 인 레이아웃을 가지고 있는데 두 개의 열이있는 행이 있습니다. 첫 번째 열에는 내용이 많으므로 일반적으로 범위를 채우고 싶습니다. 두 번째 열에는 버튼과 일부 텍스트 만 있으며, 첫 번째 열의 셀을 기준으로 아래쪽으로 정렬하고 싶습니다.

내가 가진 것은 다음과 같습니다.

-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는보다 우아한 CSS 전용 솔루션을 제공하는 flexbox를 도입했습니다). 다음은 이전 버전의 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 등)에 재사용 가능
• 상당히 잘 지원됩니다 (모든 주요 브라우저는 margin-top 지원).

이제 나쁜 소식 :

• jQuery가 필요합니다.
• 작성된대로 반응하지 않습니다 (죄송합니다).

이것은 CSS / LESS 만 사용하는 Bootstrap 3 (이전 버전에서 작동해야 함)에 대한 업데이트 된 솔루션입니다.

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

행에서 글꼴 크기를 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부모 요소에 높이가 있거나 부모 요소 내에서 관심있는 자식 요소보다 큰 다른 요소가있는 경우 값을 계산할 필요가 없습니다 .

여기에 다른 답변을 기반으로 훨씬 더 반응이 빠른 버전이 있습니다. 나는 Ivan의 버전에서 <768px 너비의 뷰포트를 지원하고 느린 창 크기 조정을 더 잘 지원하도록 변경했습니다.

!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의 솔루션을 기반으로하지만 표시로 인해 추가 된 열 간 공백을 제거하기 위해 부모 컨테이너에서 글꼴 크기를 0으로 설정하는 대신 : 인라인 블록을 재설정해야하고 간단히 추가했습니다.

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