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>

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

1 个答案: