Bootstrap 4 引导图标&；文本对齐

我试图通过用ml-4将图像与标题对齐来控制图像的边距。然而，当我尝试这样做时，它破坏了布局。我注意到我无法控制图像和文本之间的空间，我想缩小图标和文本之间的距离

请原谅我画得不好的粉红线，但我试图证明我需要这条线来符合标题

以下是我目前的代码：

  <div class="container">
    <div class="row">
      <div class="col col-980" style="background-color: #009DD6;">
        <div class="row">
          <div class="col col-md-6 col-sm-12 col-12">
            <div class="col-sm-12">
              <p class="subheader text-left mt-4 ml-2 mb-4 headline">Headline</p>
            </div>
            <div class="row mb-3">
              <div class="col-2 ml-4"><img class="rounded-circle float-center align-items-center fluid-img" alt="placeholder image 100x100" src="https://via.placeholder.com/40/FFFFFF"></div>
              <div class="col-10 pl-sm-0 pl-xs-2">
                <p class="bodywhite mr-3 pull-right">Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit.</p>
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-3 text-center"><img class="ml-4 rounded-circle align-items-center fluid-img" alt="placeholder image 100x100" src="https://via.placeholder.com/40/FFFFFF"></div>
              <div class="col-9 pl-sm-0 pl-xs-2 pl-3">
                <p class="bodywhite  mr-3">Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit.</p>
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-3 text-center"><img class="ml-4 rounded-circle align-items-center fluid-img" alt="placeholder image 100x100" src="https://via.placeholder.com/40/FFFFFF"></div>
              <div class="col-9 pl-sm-0 pl-xs-2 pl-3">
                <p class="bodywhite  mr-3">Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit.</p>
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-3 text-center"><img class="ml-4 rounded-circle align-items-center fluid-img" alt="placeholder image 100x100" src="https://via.placeholder.com/40/FFFFFF"></div>
              <div class="col-9 pl-sm-0 pl-xs-2 pl-3">
                <p class="bodywhite  mr-3">Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit.</p>
              </div>
            </div>
            <div class="row mb-3">
              <div class="col-3 text-center"><img class="ml-4 rounded-circle align-items-center fluid-img" alt="placeholder image 100x100" src="https://via.placeholder.com/40/FFFFFF"></div>
              <div class="col-9 pl-sm-0 pl-xs-2 pl-3">
                <p class="bodywhite  mr-3">Lorem ipsum dolor sit amet,
                  consectetur adipiscing elit.</p>
              </div>
            </div>
          </div>
          <div class="col col-md-6 col-sm-12 col-12 right_text_blue d-none d-md-block">

          </div>
        </div>
      </div>
    </div>
  </div>

标题
Lorem ipsum dolor sit amet，
献祭精英
Lorem ipsum dolor sit amet，
献祭精英

Lorem ipsum dolor sit amet，
献祭精英

Lorem ipsum dolor sit amet，
献祭精英

Lorem ipsum dolor sit amet，
献祭精英

您的列设置不同。这是您的示例，第一个占位符设置为col-2，以下占位符设置为col-3

<div class="row mb-3">
   <div class="col-2 ml-4">
      <img class="rounded-circle float-center align-items-center fluid-img" alt="placeholder image 100x100" src="https://via.placeholder.com/40/FFFFFF">
   </div>
   <div class="col-10 pl-sm-0 pl-xs-2">
      <p class="bodywhite mr-3 pull-right">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
   </div>
</div>
<div class="row mb-3">
   <div class="col-3 text-center">
      <img class="ml-4 rounded-circle align-items-center fluid-img" alt="placeholder image 100x100" src="https://via.placeholder.com/40/FFFFFF">
   </div>
   <div class="col-9 pl-sm-0 pl-xs-2 pl-3">
      <p class="bodywhite  mr-3">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
   </div>
</div>

Lorem ipsum dolor sit amet，
献祭精英
Lorem ipsum dolor sit amet，
献祭精英

您需要将col-3更改为col-2以使其对齐

Lorem ipsum dolor sit amet，
献祭精英
Lorem ipsum dolor sit amet，
献祭精英

我认为最好的方法是在一个flex容器中显示所有行，您可以在其中使用d-flex列类。

<div class="row mb-3">
   <div class="col-2 ml-4">
      <img class="rounded-circle float-center align-items-center fluid-img" alt="placeholder image 100x100" src="https://via.placeholder.com/40/FFFFFF">
   </div>
   <div class="col-10 pl-sm-0 pl-xs-2">
      <p class="bodywhite mr-3 pull-right">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
   </div>
</div>
<div class="row mb-3">
   <div class="col-2 text-center">
      <img class="ml-4 rounded-circle align-items-center fluid-img" alt="placeholder image 100x100" src="https://via.placeholder.com/40/FFFFFF">
   </div>
   <div class="col-9 pl-sm-0 pl-xs-2 pl-3">
      <p class="bodywhite  mr-3">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
   </div>
</div>