如何在自举中制作两个相同高度的列？

HTML：

<div class="container-fluid"> 
    <div class="row"> 

     <div class="col-md-6"> 
      <p>Line</p> 
      <p>Line</p> 
      <p>Line</p> 
      <p>Line</p> 
      <p>Line</p> 
      <p>Line</p> 

     </div> 
     <div class="col-md-6"> 
      <p>Line2</p> 
      <p>Line2</p> 

     </div> 

    </div> 
</div>

正如你可以看到两列是不相等的，每个人都有一个高度的内容。

我试图让在jsfiddle这个例子，但显然我们没有...但我把

我试图导入引导但不工作

我还发现在文档引导this例如链接，但未能实现它

你能帮我实现这个例子（如果可能的话在jsdfidle中）？

在此先感谢！

来源

2015-10-05 Marius

有趣的阅读：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks – Salketer

[如何在不指定父母的情况下强制孩子分数达到父母分数的100％高度？]（http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh） – Salketer

Bootstrap，或任何'正常'框架将不会支持这一点。此外，你不想用任何一种JavaScript来做到这一点。不，你想使用flexbox。相关文章; http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback（如果浏览器确实过时，只能使用JS）。 –

尝试添加这对你的CSS：

.row [class*="col-"]{ 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
} 

.row{ 
    overflow: hidden; 
}

https://jsfiddle.net/DTcHh/12810/

或者使用Flexbox的：

.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
}

https://jsfiddle.net/DTcHh/12811/

来源

2015-10-05 13:06:41 martincarlin87

我认为你不明白 divs左右必须排成一行，并且无论内容如何都有相同的高度。我们div红色高于蓝色 – Marius

如果它们必须是内联的，而不管视口宽度如何，那么请将col类改为“col-xs-6”而不是“col-md-6”。 – martincarlin87

尝试我在下面提供的其他解决方案，我遇到了类似的问题，它为我工作得非常好，它是一个非常简单的使用JS代码。 – CreativePS

这个工作对我来说很好，希望这将解决您的均衡高度问题。

只是适用于你想平等的DIV类“eq_height”，包括下面的代码在你的页面

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script> 
    $(document).ready(function(){ 

    var highestBox = 0; 
     $('.container-fluid .eq_height').each(function(){ 
       if($(this).height() > highestBox){ 
       highestBox = $(this).height(); 
     } 
    });  
    $('.container-fluid .eq_height').height(highestBox); 

}); 
</script>

这将需要最大div的高度，并根据它均衡。

来源

2015-10-05 13:08:26 CreativePS

我们可以使用它并保持内联样式。 – CreativePS

如何在自举中制作两个相同高度的列？

回答

相关问题