引導程序：嵌套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- *元素的高度相等

回答

相關問題