Question

每当由bootstrap列包装的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>

样式：

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

但是当没有bootstrap网格系统实现相同的代码时，div不会重叠。在使用网格系统实现时，如何阻止div重叠？为什么会发生这种情况？

Answer 1

你必须在悬停效果中添加 z-index ，如下所示：

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

这将解决问题

原因：您可以考虑代码中div的顺序，第二个是在第一个之后，并且没有指定z-index，因此通过defaut，第二个将与第一个重叠，对于其他的相同。

Answer 2

这种情况正在发生，因为bootstrap为它的列添加了相对定位。对于相对定位的div，默认为z-index。因此，您必须在悬停状态下添加z-index。

要获得结果，您可以在列的悬停状态中添加z-index，或者如果您不希望position定位，则可以将列static更改为relative。

＆＃13;

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

＆＃13;

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

＆＃13;

Div的内部引导列在缩放后重叠

2 个答案: