2014-02-26 56 views
0

如何在不使用margin-bottom:-999px的情況下使兩者在相同高度?Bootstrap 2 col同高

我更多的引用jquery來控制高度而不是使用css技巧。我已嘗試margin-bottom:-999px,它只是讓一團糟。

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

     <div class="col-md-6 col-xs-6 col-sm-6"> 

      <div class="content-box"> 

       <h4>Vision</h4> 

       <p>Global leader in ensuring quality learning in the Financial Services Industry.</p> 

      </div> 

     </div> 

     <div class="col-md-6 col-xs-6 col-sm-6"> 

      <div class="content-box"> 

       <h4>Mission</h4> 

       <p>Finance Accreditation Agency (FAA) is an international and independent quality assurance and accreditation body for the Financial Services Industry (FSI) supported by Bank Negara Malaysia and Securities Commission Malaysia (SC). It is responsible for quality assurance of learning initiatives within the FSI, including programme accreditation, institutional audits and programme evaluation.</p> 

      </div> 

     </div> 

    </div> 
</div> 

http://jsfiddle.net/pFbXd/

+0

這樣嗎? http://jsfiddle.net/pFbXd/2/ –

+0

我也不想使用修復高度。 –

回答

3

這個計算最高格,然後迫使股利具有相同的高度。

$(document).ready(function(){ 

    $('.container-fluid').each(function(){ 
     var highestBox = 0; 

     $(this).find('.content-box').each(function(){ 
      if($(this).height() > highestBox){ 
       highestBox = $(this).height(); 
      } 
     }) 

     $(this).find('.content-box').height(highestBox); 
    });  
}); 

這裏是工作演示。 http://jsfiddle.net/kheema/pFbXd/4/

+0

@Alan是你的例子嗎? –

+0

如果我在div中添加圖像,它不會處於全高。 –

+0

讓我看看它.. –

1

使用jQuery,您可以使用height()

$('.content-box').each(function() { 
    $(this).height($(this).parent().next().height()); 
}); 

Updated Fiddle

或者,如果你要設置的第一個框的高度等於第二個框高度然後使用:

$('.content-box:eq(0)').height($('.content-box:eq(1)').height()); 

Updated Fiddle

0

另一種方式..這可能不是最好的。但是,這工作。

我給ID爲每個內容框,和

而且使用這個jQuery

var cb1_height = $("#cb1").outerHeight(); 
    var cb2_height = $("#cb2").outerHeight(); 
    if(cb1_height>cb2_height) 
    { 
     $(".content-box").height(cb1_height); 
    }else 
    { 
     $(".content-box").height(cb2_height); 
    }