Question

我需要正确的列与左列具有相同的高度，因为边框需要一直向下到页面的末尾，它是设计的一部分。

我考虑过在行类上设置边框，但是列和行之间有间距，并且无法覆盖该间距。

任何帮助获得正确的专栏来拉伸整个页面都将不胜感激，谢谢。

http://www.bootply.com/117727

CSS

html, body { min-height: 100%; }
.container { min-height: 100%; }
.left { border: 1px solid red; }
.row { border: 1px solid purple; }
.right { border: 1px solid green; height: 100%; }

HTML

<div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="col-sm-8 left">
          <p>this is a paragraph</p>
          <p>this is a paragraph</p>
          <p>this is a paragraph</p>
          <p>this is a paragraph</p>
          <p>this is a paragraph</p>
          <p>this is a paragraph</p>
          <p>this is a paragraph</p>
          <p>this is a paragraph</p>
          <p>this is a paragraph</p>
          <p>this is a paragraph</p>
        </div>
        <div class="col-sm-4 right">
            <p>this is a paragraph</p>
        </div>
      </div>
    </div>
</div>

Answer 1

在您的两个专栏中添加课程.equalCol。并使用这个jQuery代码来实现魔力。

BOOTPLY DEMO

var highestCol = Math.max($('.left').height(),$('.right').height());
$('.equalCol').height(highestCol);

这里的代码是计算和比较两列的高度，并将最大值存储在highestCol变量中。之后，该最高值通过相同的类应用于该列，即.equalCol

两个twitter bootstrap列，都需要具有相同的高度

1 个答案: