Question

我有元素：
- box-1和box-2是col-1
- box-3和box-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

你基本上必须使box-1与box-3的高度相同。你可以用css手动完成它，或者你可以使用jQuery使2个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等类来确定要使其中的列具有相同高度的行，然后您可以使用下面的函数并在加载窗口时调用它（因为有图像）。 / p>

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");
        });
    }
}

＆＃13;

(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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Bootstrap 3 - 两列 - div垂直对齐

2 个答案: