HTML 文本周围的小圆圈图像/图标

Question

>假设我想在网页中为我的HTML代码绘制一个小图标/图像，如下面的线框所示。我怎样才能做到这一点？我尝试自己执行此操作，但它不起作用，而是在其上方显示整个图片，而我想将图像显示在与 h1 标题相同的行中。以下是代码段：

 div class="row">
  <div class="col-sm-4">
    <div class="row">
      <div class="col-12">
    <img class="img-circle" src="download.jpg">
    <h1> A heading </h1>
    </div>
    </div>
    <hr> <br>
    <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
  </div>

以下是上述代码的线框：线框

以下是输出：但是堆栈溢出不会让我显示:(

Answer 1

您需要将图片和标题放入自己的列中，如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="row mt-2">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-3">
                    <img class="rounded-circle" src="https://placehold.it/60">
                </div>
                <div class="col-md-9 align-self-center">
                    <h1 class="h3 pl-2">A heading </h1>
                </div>
            </div>
            <hr> <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
        </div>
    </div>
</div>

另请注意，圆角图像的正确类是 rounded-circle 。

align-self-center类用于垂直居中对齐标题。最后，pl-2类用于添加"左填充"。

这是另一个可能更适合您的版本，因为在此版本中，图像和标题永远不会堆叠在一起：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="row mt-2">
        <div class="col-md-4">
            <div class="row">
                <div class="col-2 col-md-3">
                    <img class="rounded-circle" src="https://placehold.it/60">
                </div>
                <div class="col-10 col-md-9 align-self-center">
                    <h1 class="h3 pl-4 pl-md-2">A heading </h1>
                </div>
            </div>
            <hr> <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
        </div>
    </div>
</div>