は、親の「相対的」に設定すると、内側の「絶対的な」ボトムに取り組んでいないブートストラップの列に

Question

私の基本的なHTML揃える：2列に同じ高さを作るために

<div class = "row"> 
    <div class = "col-xs-8"> 
     <p>long long long long text that generates taller column</p> 
    </div> 
    <div class = "col-xs-4"> 
     <p>shorter text that generates shorter column</p> 
    </div> 
</div> 

CSS：

.row{ 
    overflow:hidden; 
} 

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

[OK]をそれは動作しますが、伝統的な親のrelativeと子のabsoluteを試してみると、内部の要素<p>を親コンテナ<div>に移動することはできません。

.col-xs-4{ 
    position:relative; 
} 
.col-xs-4 p { 
    position:absolute; 
    bottom:0;//this wont work, but should this setting move it to its 'relative' parent div,'s bottom? 
} 

最終的に私は別のトリックを使用することができましたが、なぜこの1つが機能していないのかを知りたいと思います。これは、ブートストラップのグリッドシステムの内部実装のためですか？ an example

Answer 1

、これを応答影響を与える可能性があるJS不穏な行と列を避ける使用してみてください：私はこの質問が以前に提起されているかもしれないが、私は答えを見つけることができなかったことを認識しています

が、これは私の問題のCodePenの一例ですあなたは

<div class = "row"> 
    <div class = "col-xs-8 matchheightog"> 
     <p>long long long long text that generates taller column</p> 
    </div> 
    <div class = "col-xs-4 matchheight"> 
     <p>shorter text that generates shorter column</p> 
    </div> 
</div> 

そしてJS

$(window).on("load resize", function() { 
    $(".matchheight").height($(".matchheightog").height()); 
});