咨询是否存在无需自定义CSS、左侧带小点的区块预设类

既然你提到了 Bootstrap 的 img-circle 类，那我默认你是在使用 Bootstrap 框架啦～很遗憾的是，Bootstrap 并没有一个单一的预设类能直接实现“左侧带小点的区块”效果，但我们可以组合几个内置类快速达成需求，完全不用写自定义 CSS！

方案1：纯文本圆点的区块 #

用弹性布局类+间距类+文本颜色类就能实现，代码示例：

<div class="d-flex align-items-start">
  <span class="text-muted me-2">•</span>
  <div>
    这里是区块的内容，可以是一段文本、图片或者其他元素组合
  </div>
</div>

• d-flex：把区块变成弹性布局，让小点和内容横向排列
• align-items-start：让小点和内容顶部对齐（根据需求也可以换成align-items-center垂直居中）
• text-muted：给小点设置灰色调（也可以换成text-primary/text-danger等颜色类）
• me-2：给小点右侧添加间距（Bootstrap 4 用mr-2）

方案2：带背景的圆形小点区块 #

如果你想要更显眼的实心圆点，可以结合badge和rounded-circle类（和img-circle的圆形逻辑一致）：

<div class="d-flex align-items-start">
  <span class="badge rounded-circle bg-primary me-2 w-2 h-2"></span>
  <div>
    这里是区块的内容，可以是一段文本、图片或者其他元素组合
  </div>
</div>

• badge：提供基础的内联块样式
• rounded-circle：把元素变成圆形（和img-circle效果一致）
• bg-primary：设置圆点的背景色（可替换成其他背景色类）
• w-2 h-2：设置圆点的尺寸（Bootstrap 5 的尺寸类，对应宽度高度0.5rem）
• 同样用d-flex和me-2来控制布局和间距

如果是使用其他 CSS 框架（比如 Tailwind CSS），也可以用类似的组合类实现，但核心思路都是用框架内置的布局、间距、样式类拼接效果。要是你没有用任何框架，原生 HTML/CSS 确实没有这类预设类，必须自定义样式，但既然你提到了img-circle，应该是在用 Bootstrap 对吧？

内容的提问来源于stack exchange，提问作者thattommm