ブートストラップ列のdivは同じサイズではなく、見た目を見せてくれません

Question

2列の列を作成しようとしていますが、各行にはいくつかのdivがあります。私の間違いを見つけることはできません。いくつかの間違った詰め物や何か。私は小さな画面やメディアのためのイメージのようにコンテンツを表示したい。ズームイン/アウトしようとするとき私はちょうどそれを理解することができません。ここにbootplyのリンクがあります：www.bootply.com/7SYM2HRGVg

Answer 1

私はあなたの望む結果を達成しました。 （私は主にあなたの不要な宣言の一部を取り出した、あなたがその作業を行うことがブートストラップたい）これでbootplyにあなたの全体のCSSを変更してみてください：

main .row { 
} 
main .row div { 
} 
main .row div h2 { 
    font-family: "Open Sans"; 
    margin-bottom: 10%; 
} 
main .row div p { 
    width: 100%; 
    padding-right: 10px; 
    color: #959595; 
    font-family: "Open Sans"; 
    font-size: 13px; 
    line-height: 1.7em; 
} 
main .row #second_text { 
    margin-top: 12%; 
} 
main #row2, 
main #row3 { 
} 
main #row2 div, 
main #row3 div { 
    background-color: #f5989d; 
} 
main #row2 div:hover, 
main #row3 div:hover { 
    cursor: pointer; 
    background-color: #82ca9c; 
} 
main #row2 div h3, 
main #row3 div h3 { 
    padding-bottom: 2%; 
    color: #fff; 
    font-family: "Open Sans"; 
} 
main #row2 div p, 
main #row3 div p { 
    line-height: 1.8em; 
    font-family: "Open Sans"; 
    color: #fff; 
} 
main #row2 div p:last-of-type, 
main #row3 div p:last-of-type { 
    width: 160px; 
    font-weight: bold; 
    margin-bottom: 0; 
} 
main #row2 div p:last-of-type i, 
main #row3 div p:last-of-type i { 
    vertical-align: middle; 
    margin-left: 10px; 
    font-size: 18px; 
} 
main #row2 div #icon2, 
main #row3 div #icon2 { 
    position: relative; 
    color: #fff; 
    font-size: 18px; 
} 
main #row2 #box2, 
main #row3 #box2 { 
    background-color: #615f7d; 
} 
main #row2 #box2:hover, 
main #row3 #box2:hover { 
    cursor: pointer; 
    background-color: #192431; 
} 
main #row2 #box3, 
main #row3 #box3 { 
    background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/Clients.png") no-repeat #fff; 
    background-size: cover; 
    background: black; 
} 
main #row2 #box3:hover, 
main #row3 #box3:hover { 
    background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/Clients2.png") no-repeat; 
    background-size: cover; 
} 
main #row2 #box3 p:last-of-type, 
main #row3 #box3 p:last-of-type { 
    margin-top: 16%; 
    margin-bottom: 0; 
} 
main #row3 { 
    margin-top: 0; 
} 
main #row3 div { 
    background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/SignUp.png") no-repeat #fff; 
    background-size: cover; 
    background: aquamarine; 
} 
main #row3 div:hover { 
    background: url("file:///C:/Users/Dante/Desktop/OSF/Site 3/root/images/SignUp2.png") no-repeat; 
    background-size: cover; 
} 
h3 { 
margin-top: 0; 
padding-top: 10px; 
} 
main #row3 div p { 
    width: 65%; 
} 
main #row3 div p:last-of-type { 
} 
main #row3 div #icon3 { 
    position: relative; 
    color: #fff; 
    font-size: 18px; 
} 
main #row3 #box4 { 
    background: none #82ca9c; 
} 
main #row3 #box4:hover { 
    cursor: pointer; 
    background-color: #f5989d; 
} 
main #row3 #box4 h3 { 
    color: #fff; 
    font-family: "Open Sans"; 
} 
main #row3 #box4 p { 
    width: 100%; 
    line-height: 1.8em; 
    font-family: "Open Sans"; 
    color: #fff; 
} 
main #row3 #box4 p:last-of-type { 
    width: 160px; 
    font-weight: bold; 
} 
main #row3 #box4 p:last-of-type i { 
    vertical-align: middle; 
    margin-left: 10px; 
    font-size: 18px; 
} 

のdivは常に同じになりますので、その後のJavaScriptファイルの参照を追加します高さ：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script> 

<script type="text/javascript"> 
$(function() { 
    $('.col-sm-4, .col-sm-8').matchHeight(); 
}); 
</script>