Bootstrap 3-两列- div垂直对齐

Question

我有for元素：

• box-1和box-2是col 1\f25
• box-3和box-4是col-2\f25

框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

基本上，您必须使box-1与box-3的高度相同。你可以使用css手动完成，也可以使用jQuery将两个div设置为相同的高度。

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

确保您没有添加额外的边距或填充到box-1的元素：

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

这将删除box-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>

​