Question

我尝试了here给出的解决方案，但在这两种情况下我都无法将第二列扩展到全高。

我已经构建了一个简单的页面来显示我得到的内容：

No full height columns

如何让第二列（照片）扩展到与第一列相同的高度（测试）？

这是我正在使用的html / css（匹配jsfiddle here：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style>
      .fill-columns {
          display: table;
      }
      .fill-column {
          float: none;
          display: table-cell;
          vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row fill-columns">
        <div class="col-md-8 fill-column">
          <div class="well">
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
          </div>
        </div>
        <div class="col-md-4 fill-column">
          <div class="well">
            <p>Photo</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

列实际上按预期运行，但内容不会自动填充列。如果将井类添加到列本身，则可以看到这一点，例如：

<强> HTML：

<div class="container">
    <div class="row fill-columns">
        <div class="col-xs-8 fill-column well">
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
            <p>Text</p>
        </div>
        <div class="col-xs-4 fill-column well">
            <p>Photo</p>
        </div>
    </div>
</div>

如果你想保留排水沟，那么拥有最广泛支持的选项可能就是使用javascript。基础框架有一个名为Equalizer的插件用于此目的。要了解如何将均衡器与引导程序集成，您可以看到我的答案 here 。

在那个答案中，我还提供了另一种轻量级选择。要使用该选项，您可以按如下方式修改它：

var row=$('.equalize');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('.well'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('.well'), function() {
        $(this).height(maxh);
    });
});

并在您的标记中，您将均衡类添加到您的行。

引导程序3中的全高列

1 个答案: