时间戳

首页 > 解决方案 > Bootstrap 图标和文本对齐

bootstrap-4 - Bootstrap 图标和文本对齐

问题描述

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

标签： bootstrap-4

解决方案

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

推荐阅读