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的text和fontsize数量。因此底部边框不会自动与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>

Answer 2

没有javascript就可以实现它 - 这是一个自助实验 - the official experiment

你只需要在行类中添加.row-eq-height。并添加以下css。

 .row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
       </head>
       <body>
       <div class="row">
            <div class="col-lg-12">

        <div class="row row-eq-height" >
            <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>
</body>
</html>

注意：它使用flex。

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

2 个答案: