Làm cách nào để căn chỉnh dưới cùng các phần tử lưới trong bố cục chất lỏng bootstrap

Tôi có một bố cục linh hoạt bằng cách sử dụng bootstrap của Twitter, trong đó tôi có một hàng với hai cột. Cột đầu tiên có rất nhiều nội dung, tôi muốn điền khoảng cách bình thường. Cột thứ hai chỉ có một nút và một số văn bản, mà tôi muốn căn chỉnh dưới cùng so với ô trong cột đầu tiên.

Đây là những gì tôi có:

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

Đây là những gì tôi muốn:

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

Tôi đã thấy các giải pháp làm cho nhịp đầu tiên có chiều cao tuyệt đối và định vị nhịp thứ hai so với nó, nhưng giải pháp mà tôi không phải chỉ định chiều cao tuyệt đối của các div sẽ được ưu tiên hơn. Tôi cũng sẵn sàng suy nghĩ lại về cách đạt được hiệu quả tương tự. Tôi không kết hôn với việc sử dụng giàn giáo này, nó dường như có ý nghĩa nhất đối với tôi.

Bố cục này như một trò chơi:

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

Xin lưu ý: đối với người dùng Bootstrap 4+, vui lòng xem xét giải pháp của Christophe (flexbox được giới thiệu Bootstrap 4, cung cấp giải pháp chỉ CSS thanh lịch hơn). Phần sau sẽ hoạt động cho các phiên bản Bootstrap trước đó ...

Xem http://jsfiddle.net/jhfrench/bAHfj/ để biết giải pháp hoạt động.

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

Về mặt tích cực:

• theo tinh thần của các lớp trợ giúp hiện có của Bootstrap , tôi đã đặt tên cho lớp đó pull-down.
• chỉ phần tử đang bị "kéo xuống" mới cần được phân loại, vì vậy ...
• ... nó có thể tái sử dụng cho các loại phần tử khác nhau (div, span, section, p, v.v.)
• nó được hỗ trợ khá tốt (tất cả các trình duyệt chính đều hỗ trợ margin-top)

Bây giờ là tin xấu:

• nó yêu cầu jQuery
• nó không phải, như đã viết, phản hồi (xin lỗi)

Đây là giải pháp cập nhật cho Bootstrap 3 (mặc dù sẽ hoạt động với các phiên bản cũ hơn) chỉ sử dụng CSS / LESS:

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

Bạn đặt kích thước phông chữ thành 0 trên hàng (nếu không, bạn sẽ có khoảng trống khó chịu giữa các cột), sau đó xóa cột nổi, đặt hiển thị thành inline-block, đặt lại kích thước phông chữ của chúng và sau đó vertical-aligncó thể được đặt thành bất cứ thứ gì bạn cần.

Không cần jQuery.

Bạn có thể sử dụng flex:

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

Bạn cần thêm một số kiểu cho span6, smthg như thế:

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

và đây là trò chơi của bạn: http://jsfiddle.net/sgB3T/

Đây cũng là một chỉ thị anglejs để triển khai chức năng này

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

Chỉ cần đặt cha mẹ thành display:flex;và con thành margin-top:auto. Thao tác này sẽ đặt nội dung con ở dưới cùng của phần tử mẹ, giả sử phần tử mẹ có chiều cao lớn hơn phần tử con.

Không cần phải thử và tính giá trị margin-topkhi bạn có chiều cao trên phần tử mẹ hoặc một phần tử khác lớn hơn phần tử con mà bạn quan tâm trong phần tử mẹ của bạn.

Dựa trên các câu trả lời khác, đây là một phiên bản thậm chí còn đáp ứng tốt hơn. Tôi đã thực hiện các thay đổi từ phiên bản của Ivan để hỗ trợ các chế độ xem rộng <768px và để hỗ trợ tốt hơn việc thay đổi kích thước cửa sổ chậm.

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

Điều này dựa trên giải pháp của cfx, nhưng thay vì đặt kích thước phông chữ thành 0 trong vùng chứa mẹ để loại bỏ khoảng cách giữa các cột được thêm vào do hiển thị: inline-block và phải đặt lại chúng, tôi chỉ cần thêm

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

vào cột div để bù.

Vâng, tôi không thích bất kỳ của những câu trả lời, giải pháp của tôi về cùng một vấn đề là để thêm video này: <div>&nbsp;</div>. Vì vậy, trong lược đồ của bạn, nó sẽ giống như thế này (ít nhiều), không cần thay đổi kiểu dáng trong trường hợp của tôi:

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

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