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>

在不更改引导网格中<div>大小的情况下创建一侧边框

2 个答案: