隣接する2つの行の間にスペースを確保する必要があります

Question

ブートストラップ3では、レイアウトを私がしたいようにすることができず、なぜそれが見えません。

マイHTML：

 <div class="container"> 
      <div id="row1" class="row"> 
     <div class="col-lg-4 col-lg-push-8 col-md-4 col-md-push-8 col-sm-push-8 col-sm-4"> 
      <div class="round"></div> 
     </div> 
     <div class="col-lg-8 col-lg-pull-4 col-md-8 col-md-pull-4 col-sm-8 col-sm-pull-4 intro-text"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> 
     </div> 
     </div> 
     <div id="row2" class="row"> 
     <div class="col-lg-4 col-md-4 col-sm-4"> 
      <div class="round"></div> 
     </div> 
     <div class="col-lg-8 col-md-8 col-sm-8 intro-text"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p> 
     </div> 
     </div> 
     </div> 


My CSS : 

    #row1 { 
     opacity:0.3; 
     background-color: red; 
    } 

    #row2 { 
    opacity:0.3; 
    background-color: yellow; 
    } 
    .intro-text { 
    text-align:center; 
    } 
    .round { 
    background:#bfd70e; 
    border-radius:50%; 
    width:160px; 
    height:160px; 
    border:2px solid #679403; 
    margin:0 auto; 
    } 
    @media(min-width:767px) { 
     .intro-text { 
     margin-top:60px; 
     } 
    #row2 { 
    margin-top:-15px; 
    } 
} 

は、私が最初にJSのフィドルと同じ構造を維持するが、最初の1行上の2を作ることによって、いくつかのスペースを獲得したいです。だから私はマージントップを試しましたが、それはすべての構造を壊しました、なぜ私は分かりません。これは、JSのフィドルが、私はそれを修正するにはどうすればよい

#row2 { 
     margin-top:-15px; 
     } 

JS fiddle

である

#row2 { 
    margin-top:-15px; 
    } 

JS fiddle

：

これがなくてJSのフィドルはありますか？

Answer 1

要素はしたがって、上記の要素と衝突する、静的に配置されているからです。

2番目の行にposition:absoluteを付けると、他の要素が何をしているかにかかわらず位置が設定されているため、要素との衝突が止まるはずです。 https://jsfiddle.net/584wcaa5/2/

Answer 2

はあなたを変更

：

margin-top: -15px; 

へ：

margin-top: 15px; 

そうでなければ、あなたがそれをプルダウンしています。

https://jsfiddle.net/584wcaa5/1/