哈弗第一行的最後一個項目，第二行的前兩個項目移動

Question

我只是做了使用引導和CSS 2D佈局，

please follow [this link to see] 

（http://codepen.io/geesonC/pen/xGYJrQ）

問題是，當我將鼠標懸停在第一排的最後一項，第二排的前兩項將移動到第三排。

我只是無法解決它，請給我建議。

CSS代碼

<style> 
.margintop-300{ 
    margin-top:-300px; 
} 

.rotate-imgs{ 
    padding:24px; 
    margin-top:20px; 
    margin-bottom:60px; 
    text-align:center; 
} 

.rotate-imgs:hover >.rotate-img{ 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
} 

.rotate-imgs:hover >.rotate-img-bg1{ 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    border:0; 
} 

.rotate-imgs:hover >.rotate-img-bg2{ 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    border:0; 
} 

.rotate-img{ 
    padding:0; 
    text-align:center; 
    -webkit-transform: rotate(-1deg); 
    -moz-transform: rotate(-1deg); 
    -o-transform: rotate(-1deg); 
    transform: rotate(-1deg); 

    -webkit-transition: all 0.1s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition:all 0.2s ease-in-out; 

    z-index:1012; 
} 

.rotate-img-bg1{ 
    padding:0; 
    text-align:center; 
    border:1px solid #dddddd; 
    -webkit-transform: rotate(6deg); 
    -moz-transform: rotate(6deg); 
    -o-transform: rotate(6deg); 
    transform: rotate(6deg); 

    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition:all 0.2s ease-in-out; 
    z-index:1011; 
} 

.rotate-img-bg2{ 
    padding:0; 
    text-align:center; 
    border:1px solid #dddddd; 
    -webkit-transform: rotate(10deg); 
    -moz-transform: rotate(10deg); 
    -o-transform: rotate(10deg); 
    transform: rotate(10deg); 

    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition:all 0.2s ease-in-out; 
    z-index:1010; 
} 

HTML代碼

<div class="container"> 
<div class="row"> 
    <div class="col-md-4 col-sm-6"> 
     <div class="rotate-imgs"> 
      <div class="rotate-img-bg1"><img src=""></div> 
      <div class="rotate-img-bg2 margintop-300"><img src=""></div> 
      <div class="rotate-img margintop-300"><img src=""></div> 
     </div> 
    </div> 
    ... 
    <div class="col-md-4 col-sm-6"> 
     <div class="rotate-imgs"> 
      <div class="rotate-img-bg1"><img src=""></div> 
      <div class="rotate-img-bg2 margintop-300"><img src=""></div> 
      <div class="rotate-img margintop-300"><img src=""></div> 
     </div> 
    </div> 
    </div> 
    </div> 

謝謝！

Answer 1

CSS邊框屬性（如.rotate-img-bg1和.rotate-img-bg2）是從元素開始的，這意味着它們會影響頁面佈局。快速解決方案將代替在這些元素上使用border: none;，而不是使用border: 1px solid transparent;。

Codepen：http://codepen.io/maxlaumeister/pen/MwQBQQ