css - 在 Bootstrap 网格中创建单边边框而不更改 的大小

Question

我正在为 bootstrap 3 网格在 html5 中实现 native DnD，我正在尝试生成指示器，同时在两个元素之间拖动以告诉用户他可以将元素放在该位置。

现在，只要拖动悬停在元素的左侧或右侧，我就会添加 border-left 和 border-right。这基本上可以正常工作，但是当将边框拖动到下一个元素时，边框会随着 div 大小的变化而跳跃。

我试过了

• outline -> 不能只为一侧创建轮廓
• box-shadow -> 不能使用像dashed这样的样式

我制作了一个简单的 fiddle 来演示效果:https://jsfiddle.net/tmaqxh87/7/ (悬停应该模拟DnD；js只是为了演示目的)

编辑:我的目标是在两个框之间出现一条一致的线，而不改变任何容器的大小。我想这样做而不生成任何额外的 html 元素。

感谢任何帮助，谢谢

Answer 1

调整了边框，使左右始终有边框 - 但透明......

.row>div {
  padding: 20px;
}

.child {
  background-color: red;
  width: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
}
.col-xs-3{
    border-left:5px dashed transparent;
    border-right:5px dashed transparent;
    margin:0 -2.5px;
}

.col-xs-3:nth-of-type(odd):hover{
  border-right: 5px dashed black !important;
}
.col-xs-3:nth-of-type(even):hover{
  border-left: 5px dashed black !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class='row'>
  <div class="col-xs-3">
    <div class="child" id="1">
      #
    </div>
  </div>
  <div class="col-xs-3">
    <div class="child" id="2">
      #
    </div>
  </div>
  <div class="col-xs-3">
    <div class="child" id="3">
      #
    </div>
  </div>
  <div class="col-xs-3">
    <div class="child" id="4">
      #
    </div>
  </div>
</div>