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小提琴：

#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/

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

2 个答案: