引导图标和文本对齐方式

Question

我试图通过使用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>

Answer 1

您设置了不同的列。这是您的示例，您将第一个占位符设置为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>

您需要将col-3更改为col-2才能使其对齐。https://imgur.com/sgBfntw.jpg

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