bootstrap 2 div 剩余空间和高度问题

Question

我用 bootstrap 2.3.2 而不是 3 创建了一个 html 的东西 html 有一个 div 和四个子 div。代码如下

<div class="row-fluid column">
  <div class="span3 testOne">Sample One
                         <br>Sample One
                         <br>Sample One
  </div>
  <div class="span3 testTwo">Sample Two
  </div>
  <div class="span3 testThree">Sample Three
                           <br>Sample Three
                           <br>Sample Three
  </div>
  <div class="span3 testFour">Sample Four
  </div>
</div>

代码运行良好，但我面临两个问题。

1. 我在子 div 之间获得空间
2. 如果一个子 div 很大（包含更多数据），那么小 div（包含更少数据）高度与大 div 不成比例

我期望达到的效果如下图所示

谁能告诉我一些解决方法

注意： 我不能使用 flex，因为它在 IE8 中不起作用，我还需要使用具有适当响应能力的 bootstrap 2.3.2

JSFiddle

Answer 1

我会制作一个 css 标记，例如 .nomargin{margin-left:0px!important;}，并将该类添加到相关的 div 中 testOne, testTwo, testThree, testFour，并确保正确设置宽度

Answer 2

1）第一个问题可以通过下载Bootstrap开发版解决。这有 LESS 文件。在这里您可以转到/less/variables.less。变量@gridGutterWidth 设置为“20px”。如果你设置这个'0px'，列之间的宽度就会消失。

您必须编译较少的文件。你可以在这里找到方法：http://lesscss.org/

2) 第二个问题更难解决。最好从这里使用解决方案#1（使用负边距）： How can I make Bootstrap columns all the same height?

Answer 3

对于 css 修改类为：

.column{
    overflow: hidden;
}

.testTwo{

    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;

}

.testThree{

    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;

}