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>

代码工作正常，但我面临两个问题。

我在儿童div
如果一个子div很大（包含更多数据）那么小div（包含较少数据）高度与大数据不成比例

我期望实现的目标如下所示

任何人都可以告诉我一些解决方案吗

注意： 我无法使用flex，因为它无法在IE8中运行，我也需要使用bootstrap 2.3.2并具有适当的响应性

JSFiddle

Answer 1

对于css，修改类为：

.column{
    overflow: hidden;
}

.testTwo{

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

}

.testThree{

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

}

Answer 2

1）第一个问题可以通过下载Bootstrap的开发版来解决。这有LESS文件。在这里你可以去/less/variables.less。变量@gridGutterWidth设置为＆＃39; 20px＆＃39;。如果你制作了这个＆＃39; 0px＆＃39;，列之间的宽度将会消失。

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

2）第二个问题难以解决。从这里开始使用解决方案＃1（使用负边距）可能是最好的： How can I make Bootstrap columns all the same height?

Answer 3

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

bootstrap 2 div左侧空间和高度问题

3 个答案: