divst要素の内側のブートストラップ列は、ブートストラップ列でラップされたdiv要素のスケールが大きくなると、スケーリング後に重複します（

Question

）。なぜ起きているのか分かりません。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-3 red"></div> 
     <div class="col-3 green"></div> 
     <div class="col-3 yellow"></div> 
     <div class="col-3 blue"></div> 
    </div> 
</div> 

スタイリング：

.red, .green, .yellow, .blue { 
     height: 100px; 
    } 

    .red{ 
     background-color: red; 
     transition: 1s; 
    } 

    .green{ 
     background-color: green; 
     transition: 1s; 
    } 

    .yellow{ 
     background-color: yellow; 
     transition: 1s; 
    } 

    .blue{ 
     background-color: blue; 
     transition: 1s; 
    } 

    .red:hover, .green:hover, .yellow:hover, .blue:hover{ 
     transform: scale(1.5); 
    } 

https://jsfiddle.net/leo9130/snega0ho/

が、同じコードは、ブートストラップグリッドシステムなしで実装され、のdivのは重なっていません。グリッドシステムで実装されたときにdivを重複させないようにするにはどうすればよいですか？

Answer 1

これは、ブートストラップが相対位置を列に追加するために起こっていました。相対的に配置されたdivの場合は、デフォルトのz-indexとなります。したがってホバー状態にz-indexを追加する必要があります。

z-indexを列のホバー状態に追加するか、またはを配置したくない場合はpositionをstaticに変更することができます。

.row .col-3:hover { 
 
    z-index: 1; // or you can change the columns position to static if you do not want relative positioning. 
 
} 
 

 
.red, 
 
.green, 
 
.yellow, 
 
.blue { 
 
    height: 100px; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
    transition: 1s; 
 
} 
 

 
.green { 
 
    background-color: green; 
 
    transition: 1s; 
 
} 
 

 
.yellow { 
 
    background-color: yellow; 
 
    transition: 1s; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
    transition: 1s; 
 
} 
 

 
.without>.red, 
 
.green, 
 
.yellow, 
 
.blue { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 25%; 
 
} 
 

 
.red:hover, 
 
.green:hover, 
 
.yellow:hover, 
 
.blue:hover { 
 
    transform: scale(1.5); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
 
<p> Using bootstrap row </p> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-3 red"></div> 
 
    <div class="col-3 green"></div> 
 
    <div class="col-3 yellow"></div> 
 
    <div class="col-3 blue"></div> 
 
    </div> 
 
</div> 
 

 
<div class="without"> 
 
    <p>Without bootstrap row</p> 
 
    <div class="red"></div> 
 
    <div class="green"></div> 
 
    <div class="yellow"></div> 
 
    <div class="blue"></div> 
 
</div>

Answer 2

あなたは、このようなホバー効果でZインデックスを追加する必要があります。

.red:hover, .green:hover, .yellow:hover, .blue:hover{ 
      transform: scale(1.5); 
      z-index:99; 
} 

理由のために、これは問題に

を解決します：あなたはあなたの中にdiv要素の順序を考慮することができます2番目のものは最初のものの後にあり、z-indexは指定されていないので、2番目のものは最初のものと重なり、他のものも同じです。