Sử dụng twitter bootstrap 2.0 - Cách tạo chiều cao cột bằng nhau?

Question

Bootstrap 2.0 có bất kỳ trình trợ giúp nào để tạo .span1, .span2 .... .span12 chiều cao bằng nhau không. Tôi đã lồng vào loại html này

<div class='container'> 
    <div class='row'> 
    <div class='span2'> 
     <div class='well'> 
     XXXX 
     </div> 
    </div> 
    <div class='span2'> 
     <div class='well'> 
     XXXX 
     XXXX 
     </div> 
    </div> 
    <div class='span2'> 
     <div class='well'> 
     XXXX 
     XXXX 
     XXXX 
     </div> 
    </div> 
    </div> 
</div> 

Tôi muốn mỗi cái có cùng chiều cao nếu có thể?

Answer 1

Dưới đây là một giải pháp CSS đáp ứng, dựa trên thêm một lớp đệm lớn và tiêu cực không kém phần lớn lề cho mỗi cột, sau đó gói toàn bộ hàng trong một lớp có ẩn bị tràn.

.col{ 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
    background-color:#ffc; 
} 

.col-wrap{ 
    overflow: hidden; 
} 

Bạn có thể nhìn thấy nó làm việc tại jsFiddle

Sửa

Để đáp lại câu hỏi, đây là một biến thể nếu bạn cần giếng chiều cao bằng hoặc cột chiều cao bình đẳng với các góc tròn: http://jsfiddle.net/panchroma/4Pyhj/

Chỉnh sửa

Để đáp lại câu hỏi, đây là kỹ thuật tương tự trong Bootstrap 3, cùng nguyên tắc, chỉ cần cập nhật các tên lớp trong lưới Bootstap: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

Answer 2

Hãy thử một cái gì đó như thế này (không phải là rất tao nhã, mặc dù):

$('.well').css({ 
    'height': $('.well').height() 
}); 

Các jQuerys height() phương thức trả về giá trị cao nhất khi có nhiều yếu tố được lựa chọn.

Xem jsFiddle: phương pháp http://jsfiddle.net/4HxVT/

Answer 3

jQuery chiều cao() trả về giá trị của "phần tử đầu tiên trong tập hợp các yếu tố phù hợp". Câu trả lời trong http://jsfiddle.net/4HxVT/ chỉ hoạt động vì phần tử đầu tiên trong hàng cũng cao nhất.

Đây là một giải pháp jQuery dựa trên:

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

(Via câu trả lời này: https://stackoverflow.com/a/526316/518535)

Answer 4

Mở rộng trên các câu trả lời đã được đưa ra, tôi đã chỉ giải quyết điều này bằng jquery và underscore. Đoạn dưới đây equalizes chiều cao của giếng và cảnh báo của tôi xuất hiện trên một hàng nhất định, không phân biệt nơi người cao nhất xuất hiện:

$('.well, .alert').height(function() { 
    var h = _.max($(this).closest('.row').find('.well, .alert'), function (elem, index, list) { 
     return $(elem).height(); 
    }); 
    return $(h).height(); 
}); 

Answer 5

tôi giải quyết điều này với một tùy chỉnh jQuery max plugin:

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get()); 
} 

đây nội dung hộp là yếu tố cột nội bộ của tôi, nội dung chứa là wrapper chứa các cột:

$('.content-box').height(function() { 
    var maxHeight = $(this).closest('.content-container').find('.content-box') 
        .max(function() { 
        return $(this).height(); 
        }); 
    return maxHeight; 
}) 

Answer 6

$.fn.matchHeight = function() { 
    var max = 0; 

    $(this).each(function(i, e) { 
    var height = $(e).height(); 
    max = height > max ? height : max; 
    }); 

    $(this).height(max); 
}; 

$('.match-height').matchHeight(); 

Answer 7

Các giải pháp trên đều hoạt động cho đến khi bạn thêm các nút bootstrap đẹp! Làm thế nào để bạn vị trí nút tôi nghĩ (có, đó là vấn đề của tôi).

tôi kết hợp CSS với câu trả lời jquery từ How might I force a floating DIV to match the height of another floating DIV?

Sau một chút frigging tôi nhận này, mà làm việc với CSS mặc dù các nút không xếp hàng, và là tốt với jQuery

Feel miễn phí để sửa chữa các dòng nút CSS lên chút :)

jQuery:

$.fn.equalHeights = function (px) { 
    $(this).each(function() { 
     var currentTallest = 0; 
     $(this).children().each(function (i) { 
      if ($(this).height() > currentTallest) { 
       currentTallest = $(this).height(); 
      } 
     }); 
     if (!px && Number.prototype.pxToEm) { 
      currentTallest = currentTallest.pxToEm(); //use ems unless px is specified 
     } 
     // for ie6, set height since min-height isn't supported 
     if ($.browser.msie && $.browser.version == 6.0) { 
      $(this).children().css({ 
       'height': currentTallest 
      }); 
     } 
     $(this).children().css({ 
      'min-height': currentTallest + 40 // THIS IS A FRIG - works for jquery but doesn't help CSS only 
     }); 
    }); 
    return this; 
}; 

$(document).ready(function() { 
    var btnstyle = { 
    position : 'absolute', 
    bottom : '5px', 
    left : '10px' 
    }; 
    $('.btn').css(btnstyle); 
    var colstyle = { 
    marginBottom : '0px', 
    paddingBottom : '0px', 
    backgroundColor : '#fbf' 
    }; 
    $('.col').css(colstyle);  
    $('.row-fluid').equalHeights(); 
}); 

CSS

.col { 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
    background-color:#ffb; 
    position:relative; 
} 
.col-wrap { 
    overflow: hidden; 
} 

.btn{ 
    margin-left:10px ; 
} 
p:last-child { 
margin-bottom:20px ; 
} 

jsfiddle - http://jsfiddle.net/brianlmerritt/k8Bkm/

Answer 8

Đây là giải pháp của tôi với 2 cột (thích ứng này vào các cột hơn là đơn giản, chỉ cần thêm điều kiện nhiều hơn nữa). Chạy trên sự kiện tải để có chiều cao chính xác của tất cả các yếu tố.

$(window).on('load', function() { 
    var left = $('.left'); 
    var leftHeight = left.height(); 
    var right = $('.right'); 
    var rightHeight = right.height(); 

    // Width like mobile, the height calculation is not needed 
    if ($(window).width() <= 751) 
    { 
     if (leftHeight > rightHeight) { 
      right.css({ 
       'height': 'auto' 
      }); 
     } 
     else { 
      left.css({ 
       'height': 'auto' 
      }); 
     } 

     return; 
    } 

    if (leftHeight > rightHeight) { 
     right.css({ 
      'height': leftHeight 
     }); 
    } 
    else { 
     left.css({ 
      'height': rightHeight 
     }); 
    } 
}); 

<div class="row"> 
    <div class="span4 left"></div> 
    <div class="span8 right"></div> 
</div>