引導3 - 兩列 - div垂直對齊

Question

我有元件：
- 箱1和箱2是COL-1
- 盒3和箱4是COL-2

框1,2,4是文本，3是圖像。 這兩列有不同的高度。

我該如何強制box-2的垂直對齊，使box-2和box-4具有相同的底線？

目前我發現這js Sam152/Javascript-Equal-Height-Responsive-Rows，所以我可以強制在同一高度的兩列。我不知道這是否以正確的方式邁出了一步。

這裏的基本代碼（不JS元素）：

<div class="container"> 
      <div class="row"> 
       <!-- col 1 --> 
       <div class="col-md-6"> 
        <div id="box-1"> 
         <h1>1<br>TEXT</h1> 
        </div> 
        <div id="box-2"> 
         <h1>2<br>TEXT</h1> 
        </div> 
       </div> 
       <!-- col 2 --> 
       <div class="col-md-6"> 
        <div id="box-3"> 
         <img src="http://lorempixel.com/480/360" /> 
        </div> 
        <div id="box-4"> 
         <a href=""> 
          <h1>4<br>TEXT</h1> 
         </a> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

你基本上做箱1相同的高度箱3。你可以用css手工完成它，或者你可以使用jQuery使2個div的高度相同。

<script> 
    $(document).ready(function(){ 
     var Height = $('#box-3').height(); 
     $('#box-1').height(Height); 
    }); 
</script> 

確保您不要有添加額外的保證金或填充元素框-1：

#box-1 * { 
    margin: 0; 
    padding: 0; 
} 

這將在箱1

Answer 2

擺脫所有元素的填充和保證金

這也是我的問題，但我解決了它的JavaScript。首先你需要確定哪一行你想通過添加像equal-height這樣的類，使其中的列具有相同的高度，然後可以使用下面的函數並在窗口加載時調用它（因爲存在圖像）。

function equalizeColumnContentHeight(){ 
    if(window.innerWidth > 990){ 
     $(".equal-height").each(function(){ 
      //resetting height to auto 
      $(this).find(".col-content").height("auto"); 

      var height = $(this).outerHeight(); 
      $(this).find(".col-content").height(height); 
     }); 
    } else { 
     $(".equal-height").each(function(){ 
      $(this).find(".col-content").height("auto"); 
     }); 
    } 
} 

(function() { 
 
    function equalizeColumnHeight() { 
 

 
    // This should be the breakpoint when your layout break to block 
 
    if (window.innerWidth > 480) { 
 
     $(".equal-height").each(function() { 
 
     //resetting height to auto 
 
     $(this).find("[class^='col-']").height("auto"); 
 

 
     var height = $(this).outerHeight(); 
 
     $(this).find("[class^='col-']").height(height); 
 
     }); 
 
    } else { 
 
     $(".equal-height").each(function() { 
 
     $(this).find("[class^='col-']").height("auto"); 
 
     }); 
 
    } 
 
    } 
 

 
    $(window).load(function() { 
 
    equalizeColumnHeight() 
 
    }); 
 

 

 
})(jQuery);

@import "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"; 
 
.col-xs-6 { 
 
    background: #bad455; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="container"> 
 

 
    <div class="row equal-height"> 
 
    <div class="col-xs-6"> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <img src="https://d13yacurqjgara.cloudfront.net/users/13307/screenshots/1824627/logotypes_1x.jpg"> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>