如何使用Bootstrap和CSS使元素响应？

Question

我有一个简单的部分，其中我有左内容和右内容，在左内容中有一堆文字，在右边有两个椭圆/圆，我希望这些椭圆或圆能够响应。此处jsfiddle live demo

这是我到目前为止所拥有的

HTML

<div class="container">
   <div class="row">
       <div class="col-lg-6 col-md-12 col-xs-12">
          left content
       </div>

        <div class="col-lg-6 col-md-12 col-xs-12">

         <div class="c1">
            <div class="connect1"></div>
            </div>

          <div class="c2">

          </div>
         </div>

    </div>
</div>

这是CSS

.c1, .c2 {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: aqua;
  position: absolute;
}

.c1 {
  left: 20px;
  top: 50px;
}

.connect1 {
  position: absolute;
  right: -80px;
  top: 130px;
  background: orange;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.connect1::before, .connect1::after {
  content: '';
  display: block;
  background: orange;
  height: 10px;
  position: absolute;
  z-index: -1;
}
.connect1::before {
  width: 200px;
  top: -20px;
  left: -180px;
  transform: rotate(20deg);
}
.connect1::after {
  width: 200px;
  right: -160px;
  top: 70px;
  transform: rotate(35deg);
}

.c2 {
  left: 300px;
  top: 180px;
}

上述解决方案可以在移动设备上为我提供

这是移动设备上的预期结果

Answer 1

圆圈的宽度和高度固定，因此无法响应。它们以固定的距离绝对定位，这就是它们无法响应的另一个原因。

拍摄一个屏幕截图（我已经看到了），将其另存为jpg图像，然后像这样将其放入html

<img src="screenshot.jpg" class="img-w100 img-responsive" alt="">

.img-w100 {
  display: block;
  width: 100%;
}