ブートストラップ：行の重複と高さの不一致

Question

ブートストラップを使用して簡単なWebアプリケーションを作成しようとしています。 しかし、私は物事を表示する方法に関連するいくつかの問題に直面しています。行は前のものと重複しており、行の高さは0に設定されています正しい高さを持っていて、私がそれらをほしいと思う方法だけが示されています。

は、ここでHTMLコードです：

<div class="container"> 
    <div class="row">Some title</div> 
    <div class="row"> 
    <div class="col-md-6"> 
     <div class="wrapper"> 
     <div class="MiddlePreviewBox"> 

     </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="wrapper"> 
     <div class="MiddlePreviewBox"> 

     </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-6"> 
     <div class="wrapper"> 
     <div class="MiddlePreviewBox"> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="wrapper"> 
     <div class="MiddlePreviewBox"> 

     </div> 
     </div> 
    </div> 
    </div> 
</div> 

とCSS（以下）

@border-width: 1px; 
@aquaClear: rgba(0, 255, 255, 0.4); 
@aqua: rgba(0, 255, 255, 1); 
@whiteClear: rgba(255, 255, 255, 0.75); 
@whiteTransparent: rgba(255, 255, 255, 0); 
@orange: rgb(255,165,0); 

body { 
    background-color: rgb(50, 50, 50) !important; 
} 

.container { 
    background-color: white; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.62), 0 6px 20px 0 rgba(0, 0, 0, 0.619); 
} 


// Using variables 
.MiddlePreviewBox { 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding-bottom: 50%; //Ratio 1:0.5 
    background-color: green; 
    background-size: 200% 100%; 
    background-position-x: -200px; 
    background-image: url(http://www.imagendigital.com/web/img/global/leon_imagen_digital.jpg); 


} 

.wrapper { 
    position: relative; 
    width: 100%; /* <-- just a default, can be anything. */ 
} 

ここでは、コード（Codepen.io）です：

https://codepen.io/julianbautista87/pen/WjJWGg

Answer 1

これは、MiddlePreviewBoxをabsoluteに配置したためです。これを行う必要はありません。 absoluteを削除し、margin-top:20px;を.wrapperクラスに設定してください。

お返事のための

Codepen

Answer 2

は、あなたのコンテナがあります行と重複しています 次のコードを教えてくださいchアンジュ：

.container { 
 
    /* background-color: white; remove*/ 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.62), 0 6px 20px 0 rgba(0, 0, 0, 0.619); 
 
} 
 
#title-row{ 
 
    background-color: white; 
 
}

も言葉いくつかのタイトルと行のID番号のタイトル行を追加します。