需要在相邻两行之间获得空间

Question

在 bootstrap 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 小提琴相同的结构，但通过将第 2 行放在第一个上面来获得一些空间。所以我尝试了一个margin-top，但它破坏了所有的结构，我不知道为什么。

这是 JS fiddle 没有：

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

JS fiddle

这是 JS 摆弄

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

JS fiddle

我该如何解决？

Answer 1

改变你的：

margin-top: -15px;

到：

margin-top: 15px;

否则你会把它拉下来。

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

Answer 2

这是因为元素是静态定位的，所以会和上面的元素发生碰撞。

如果你给你的第二行position:absolute 它应该阻止它与元素碰撞，因为位置已设置，而不管其他元素在做什么。 https://jsfiddle.net/584wcaa5/2/