css - 将文本 div 的边框与图像 div 对齐

Question

我有以下使用 Bootstrap 3 的代码:

<div class="row">
    <div class="col-lg-12">
        <div class="row">
            <div id="test1" style="text-align:center; border-style:double; font-size:14px" class="col-lg-6">
                JVM Infotech is a multifunctional company that can serve many of your educational needs.
            </div>
            <div id="test2" style=" border-style:double" class="col-lg-6" >
                <img  style="margin:auto" src="cinq1.jpg" class="img-responsive">
            </div>
        </div>
    </div>
</div>

div test1 的大小取决于test1 的文本量和字体大小。所以底部边框不会自动与 div test2 对齐。我可以通过更改 test1 的填充值来解决此问题。但这意味着每次将文本更改为 test1 都需要更改填充值，这不是好的稳定编码。我认为 Bootstrap 3 的网格系统会为此进行调整，所以我缺少什么吗？

Answer 1

Bootstrap 3 中没有默认方法(4 中会有)使动态数据列的高度相等...但您可以使用 jQuery。在这里，我将您的两列设置为“sm”，以便它们在代码段中并排显示，并将损坏的图像更改为一些短文本:

$(function() {
  var leftHeight = $('#test1').height();
  var rightHeight = $('#test2').height();

  if (leftHeight > rightHeight) {
    $('#test2').height(leftHeight);
  } else {
    $('#test1').height(rightHeight);
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12">
    <div class="row">
      <div id="test1" style="text-align:center; border-style:double; font-size:14px" class="col-sm-6">
        JVM Infotech is a multifunctional company that can serve many of your educational needs.
      </div>
      <div id="test2" style=" border-style:double" class="col-sm-6">
        Less text
      </div>
    </div>
  </div>
</div>