twitter-bootstrap - Bootstrap 分栏不同高度的动态网站

Question

我知道这个问题很常见，但我仍然没有解决这个问题。我在 bootstrap 中有一个动态画廊填充列，但每次的高度都不一样，所以我得到了这个结果

我知道 clearfix 解决了这个问题，但较长的列每次都会出现在不同的位置。

这是我的代码:

<div class="container" >
  <div class="row ">


    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">          
      <p align="center"><img src="https://lh3.googleusercontent.com/-obJ2fXQMQmg/VawsKPc7b3I/AAAAAAAANSg/DMBlW4LnRos/s208/image.jpg"></p>
      <p align="center">Floral silk chiffon with all over beading </p>
    </div>


    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">          
        <p align="center"><img src="https://lh3.googleusercontent.com/-zxR4MthXI00/VawsRkw3kLI/AAAAAAAANTg/A5h-HszkUMs/s208/image.jpg"></p>
        <p align="center">Large chevron raw silk/cotton with elaborate jewel neck piece</p>
    </div>


    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">          
        <p align="center"><img src="https://lh3.googleusercontent.com/-kNvVqJ2pt24/UazRmaF_UAI/AAAAAAAABwk/d7tJSITBTYM/s208/image.jpg"></p>
        <p align="center">Black satin lace with elaborate beaded trim and 18" fringe</p>
    </div>

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">          
        <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
        <p align="center">Green Modal fabric with elaborate trim </p>
    </div>

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"          
        <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
        <p align="center">Green Modal fabric with elaborate trim </p>
    </div>

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">          
        <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
        <p align="center">Navy and rose gold silk with elaborate beaded trim</p>
    </div>

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">         
        <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
        <p align="center">Yellow, pink and green crepe with greek key ribbon and paisley patches</p>
    </div>

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">          
        <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
        <p align="center">Red jacquard lace and lined in chiffon with elaborate beaded trim</p>
    </div>

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">         
        <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
        <p align="center">Black Modal fabric with ribbon trim</p>
    </div>

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">          
        <p align="center"><img src="https://lh3.googleusercontent.com/-eZq3QyMgF00/VQ8old75g9I/AAAAAAAAL1w/hifLnq6OE0I/s208/image.jpg"></p>
        <p align="center">Aztec print charmeuse with circle beaded trim</p>
    </div>

  </div>          
  </div> 

如何在不使用 javascript 或其他库的情况下解决此问题并始终在不同的屏幕尺寸下工作。

提前致谢

Answer 1

如果您不想使用 JavaScript，则必须为包装器指定最小高度。由于其高度可能随文本而变化，因此会出现对齐问题。

解决此问题的一种常见且快速的方法是使用 JavaScript 使用等高。这是代码

equalheight = function(container) {

    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array(),
        $el,
        topPosition = 0;
    $(container).each(function() {

        $el = $(this);
        $($el).height('auto')
        topPostion = $el.position().top;

        if (currentRowStart != topPostion) {
            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
            rowDivs.length = 0; // empty the array
            currentRowStart = topPostion;
            currentTallest = $el.height();
            rowDivs.push($el);
        } else {
            rowDivs.push($el);
            currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
        }
        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
            rowDivs[currentDiv].height(currentTallest);
        }
    });
}
$(window).resize(function() {   //to work in resize
    equalheight('.col-lg-2.col-md-3.col-sm-4.col-xs-6');
});

$(document).ready(function() {
 equalheight('.col-lg-2.col-md-3.col-sm-4.col-xs-6');
});