如何使用Bootstrap和CSS使元素響應？

Question

我有一個簡單的部分，其中有左內容和右內容，在左內容中有一堆文字，在右邊有兩個橢圓/圓，我希望這些橢圓或圓能夠響應。 這里jsfiddle 現場演示

這是我到目前為止的

的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%;
}