html - 如何在CSS中制作一个圆圈并使其响应？

Question

我正在使用 CSS 设计网页。我有一个包含一列的网格，其中有两个元素，一个是固定大小的圆(包含文本)，另一个是与圆右侧对齐的段落。

我已经完成了上面的部分，但它没有响应。圆圈的大小不会随着屏幕的大小而减小或增大。

查看图片以了解我想要实现的目标。

.Circle {
  border-radius: 50%;
  width: 100%;
  height: auto;
  font-size: 14px;
  border: 1.5px solid #fbcfce;
}
.Circle span {
  text-align: center;
  line-height: 50px;
  display: block;
}
.main {
  width: 800px;
  margin: 0 none;
}
.sidebar {
  width: 60px;
  height: 10px;
  float: left;
  overflow: none;
  line-height: 0;
  margin-right: 25px;
}
.page-wrap {
  width: 300px;
  height: auto;
  margin-left: 40px;
  margin-top: 10px;
  margin-right: 10px;
}

<div class="col-md-4 col-md-offset-1 vsa">
  <div class="row main">
    <span class="Circle sidebar span1" style="padding:29px 12px;">Verify</span> 
    <div class="page-wrap">
      Verify your student status using your institute ID card or Email ID.
    </div>
  </div>
</div>

Answer 1

除了尝试形成对您正在使用的工具和一般 CSS 的理解之外，我不知道该告诉您什么。我建议不要在这里尝试使用 Bootstrap。

查看此代码段 - 应有尽有。

.Circle {
  border-radius: 50%;
  width: 100px;
  line-height: 100px;
  border: 1.5px solid #fbcfce;
  position: absolue;
  text-align: center;
  float: left;
}
.main {
  margin-left: 120px;
}

<div class="row">
  <span class="Circle">Verify</span>
  <p class="main">
    Verify your student status using your institute ID card or Email ID.
  </p>
</div>

https://jsfiddle.net/ttq096db/1/