创建单边框而不改变尺寸 in bootstrap grid

Question

我正在html5中为bootstrap 3网格实现原生DnD，我正在尝试生成指标，同时在两个元素之间拖动以告诉用户他可以在该位置删除该项目。

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

我试过了

• outline - >不能仅为一方创建轮廓
• box-shadow - >不能使用像dashed这样的风格

我做了一个简单的小提琴，演示了效果：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>

Answer 2

根据我的理解，我试图用你的问题给出一个解决方案。我在下面给了片段。请检查并让我知道这是你想要的吗？你可以用css来做。

.row>div {
  padding: 20px;
}

.child {
  background-color: red;
  width: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
}
.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>