Html 分区'；缩放后，引导列中的重叠

每当引导列包装的div元素被放大时，它就会被它的右侧邻居重叠。我不明白为什么会这样

  <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不会重叠。当使用网格系统实现时，如何停止div重叠？为什么会发生这种情况？

之所以会发生这种情况，是因为引导向列添加了相对定位。对于相对定位的div，默认的

z-index

。因此，必须在悬停状态下添加

z-index

为了实现您的结果，您可以在列的悬停状态上添加

z-index

，或者如果不希望

相对定位，您可以将列
位置更改为
静态


.row.col-3:悬停{
z-index:1；//或者，如果不需要相对定位，可以将列位置更改为静态。
}
红色
绿色
黄先生，
蓝先生{
高度：100px；
}
瑞德先生{
背景色：红色；
过渡：1s；
}
格林先生{
背景颜色：绿色；
过渡：1s；
}
黄先生{
背景颜色：黄色；
过渡：1s；
}
蓝先生{
背景颜色：蓝色；
过渡：1s；
}
.没有>.red，
绿色
黄先生，
蓝先生{
显示：内联块；
浮动：左；
宽度：25%；
}
红色：悬停，
格林：悬停，
黄色：悬停，
蓝色：悬停{
转换：比例（1.5）；
}

使用引导行

无引导行

之所以发生这种情况，是因为引导程序为其列添加了相对定位。对于相对定位的div，默认的
z-index
。因此，必须在悬停状态下添加
z-index

为了实现您的结果，您可以在列的悬停状态上添加
z-index
，或者如果不希望
相对定位，您可以将列
位置更改为
静态


.row.col-3:悬停{
z-index:1；//或者，如果不需要相对定位，可以将列位置更改为静态。
}
红色
绿色
黄先生，
蓝先生{
高度：100px；
}
瑞德先生{
背景色：红色；
过渡：1s；
}
格林先生{
背景颜色：绿色；
过渡：1s；
}
黄先生{
背景颜色：黄色；
过渡：1s；
}
蓝先生{
背景颜色：蓝色；
过渡：1s；
}
.没有>.red，
绿色
黄先生，
蓝先生{
显示：内联块；
浮动：左；
宽度：25%；
}
红色：悬停，
格林：悬停，
黄色：悬停，
蓝色：悬停{
转换：比例（1.5）；
}

使用引导行

无引导行


    .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);
    }