Bootstrap列填充可用空间

时间:2014-07-28 02:10:22

标签: twitter-bootstrap twitter-bootstrap-3

我需要左边有一列,右边有一组没有设定高度和底部有一列的列。

这是我目前拥有的基本模型。如何使左列填充左列底部和底行之间的间隙?

enter image description here

1 个答案:

答案 0 :(得分:0)

我知道如何处理这个问题的唯一方法是使用javascript,我不建议这样做。但是,如果你必须这样做:

HTML

<div class="container">
  <div class="row" id="row">
    <div class="col-sm-4" id="left">left</div>
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-12">1</div>
      </div>
      <div class="row">
        <div class="col-sm-12">2</div>
      </div>
      <div class="row">
        <div class="col-sm-12">3</div>
      </div>
      <div class="row">
        <div class="col-sm-12">4</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">bottom</div>
  </div>
</div>

的Javascript

$('#left').outerHeight($('#row').innerHeight());

我在Bootply中有一个工作示例,但它不会保存。一旦服务恢复,将立即用该链接更新答案。