引导程序：嵌套col-md- *元素的高度相等

我还没有找到任何有关我的问题的工作解决方案，所以我真的希望你能帮助我。引导程序：嵌套col-md- *元素的高度相等

这是我的jsfiddle。

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

<!-- snippet 1 --> 
 
<div class="col-md-12 col-sm-12"> 
 
    <div class="col-md-6 col-sm-6" style="padding:0;"> 
 
     <div class="well" style="border-right:1px solid black;"> 
 
      Test 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6" style="padding:0;"> 
 
     <div class="well"> 
 
      srewdf<br>srewdf<br>srewdf<br>srewdf<br> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
<!-- snippet 2 --> 
 
<div class="col-md-12 col-sm-12"> 
 
    <div class="col-md-9 col-sm-9" style="padding:0;"> 
 
     <div class="well" style="border-right:1px solid black;"> 
 
      srewdf<br>srewdf<br>srewdf<br>srewdf<br> 
 
      srewdf<br>srewdf<br>srewdf<br>srewdf<br> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-3 col-sm-3" style="padding:0;height:50%;"> 
 
     <div class="well"> 
 
      Test 
 
     </div> 
 
    </div> 
 
    <div class="col-md-3 col-sm-3" style="padding:0;height:50%;"> 
 
     <div class="well"> 
 
      Test 
 
     </div> 
 
    </div> 
 
</div>

在片断1 I需要多个嵌套元素基于最大元件上具有相同的高度。在第二个片段中它是相似的。右侧的两个元素应该与左侧的元素具有相同的高度。

如何在不失去责任的情况下解决这个问题？

感谢您的时间和帮助！

来源

2014-11-22 sleepless

Bootstrap并不能帮助你提高身高。可能的重复：http://stackoverflow.com/questions/9787999/making-two-side-by-side-divs-heights-equal – 2014-11-22 17:23:59

事实上，它并没有帮助我。这就是为什么我试图找到另一种解决方案。链接中的示例看起来很有趣。我会尝试的。 – sleepless 2014-11-22 17:43:16

Bootstrap是CSS和js。你可以使用众多的解决方案，jQuery MatchHeight，显示：table/table-cell，padding-bottom等，这个问题经常出现，看起来更难 – Christina 2014-11-22 18:08:49

等高度列是CSS模型中的一个着名问题，Bootstrap对于帮助您可能做的很少。

您可以做的最好的事情是阅读大量的文献（我建议从http://css-tricks.com/fluid-width-equal-height-columns/开始），并计算出各种攻击和限制中的哪一个适合您的目的。根据目标浏览器的不同，您希望投资的时间，您使用Javascript的经验以及您的目标设备会有所不同。

来源

2014-11-22 19:20:28

感谢您的所有答复/评论。

这就是我现在如何解决它：

$(document).ready(function() { 
    var heights = $(".equalize").map(function() { 
     return $(this).height(); 
    }).get(), 

    maxHeight = Math.max.apply(null, heights); 

    $(".equalize").height(maxHeight); 
});

我希望我可以用纯HTML/CSS做，但，是的，这是简单的方法。

来源

2014-11-22 19:24:02 sleepless

引导程序：嵌套col-md- *元素的高度相等

回答

相关问题