html - 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>

以下是上述代码的线框图: A wireframe

下面是输出: But Stack overflow won't let me show :(

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类用于添加“padding-left”。

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

<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>