相关疑难解决方法(0)

我正在使用Bootstrap.如何将三根柱子制成相同的高度？

这是问题的屏幕截图.我希望蓝色和红色的列与黄色列的高度相同.

这是代码:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4 panel" style="background-color: red">
        some content
    </div>
    <div class="col-xs-4 panel" style="background-color: yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
    </div>
    <div class="col-xs-4 panel" style="background-color: blue">
        some more content
    </div>
</div>
</div>

我刚刚开始学习,所以请坚持下去,我会尝试提供尽可能多的信息.

使用Bootstrap 3我一直试图调整一些内容区域,使它们具有相同的高度.我每行有4个具有未指定数量的列(我正在循环通过php数组来确定这一点).基本上无论我需要显示多少内容区域,它们都应该使用相同的高度,或者至少与它上面的其他三个高度相同.

我一直在使用这个jquery库> https://github.com/mattbanks/jQuery.equalHeights >效果很好,但每当我调整页面大小时,内容区域的高度都不会更新(如果我将屏幕拖动到新的大小和命中刷新高度重新调整到正确的位置)

我还查看了一些其他解决方案,例如> Twitter Bootstrap - 流体列的相同高度,但是当我调整多行时,这似乎不起作用.

任何帮助将不胜感激,无论我是应该使用JavaScript解决方案还是我可以用CSS做什么.记住它我需要高度保持一致,并在屏幕调整大小时重新调整.我更喜欢使用Bootstrap 3,但如果解决方案可用于2,我将使用该版本.

<div class = "container">
<div class="row">
    <div id="equalheight">      

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div …

我正在构建一个最终将成为投资组合页面的Bootstrap 3网格.在下面的bootply中,在第一个示例中,您可以看到它在我的bootply中完美地堆叠从6到4到3

但是在第二个示例中,在同一个bootply中,有一个项目,其中项目的tile更长,并且在堆叠时会在网格中产生间隙.

什么是最好的bootstrap友好解决方案？任何帮助非常感谢.