如何在响应式网站中创建一条连接两个图像的行？

Question

任何人都知道如何实现这一目标？

网站正在使用bootstrap 4，并且线条必须能够在超小屏幕中消失。

Answer 1

这应该有帮助......

http://codepen.io/pranesh-r/pen/xEOAOm

将div.circle替换为您的图片..

Answer 2

如果最终结果与您的草图相似，您可以尝试将这些线视为简单div的边框，而CSS将类似于

.div-top{
  width: 100% /*resize this to adapt it*/
  height: 20px; /*give correct value*/
  border-bottom: 1px solid black; /*for example*/
  border-left: 1px solid black; /*for example*/
}
.div-bottom{
  width: 100% /*resize this to adapt it*/
  height: 20px; /*give correct value*/
  border-right: 1px solid black; /*for example*/
}

您可以按照这些示例构建所需的所有行。 HTML代码必须像这样

<div class="div-top"></div>
<div class="div-bottom"></div>