Question

美好的一天，我遇到了以下问题：引导行列未对齐，文本在col-8下，图像在col-4下。但是，即使它们在同一行中，文本和图像也不会对齐。任何帮助将不胜感激，我有一个js小提琴链接的问题。

代码段：

      <div class="col-md-8 justify_text">

        <span>

          <h4 class="bold_font color-mwc-orange">WHO WE ARE</h4>
          <br>
          <h4 class="color-mwc-blue text-height-wide2">My White Card is an innovative collaboration of the recent revolutionary healthcare approach; The first of its kind beauty, health, and wellness membership that offers an array of the best discount coupons and unlimited services in pursuit of a convenient access through a Mobile App technology. </h4>
          <h4 class="color-mwc-blue text-height-wide2">We offer different discount coupons from aesthetics, cosmetic surgeries, dental services, functional medicine, preventive healthcare and wellness programs from our Exclusive, Premiere and carefully curated clinics and excellent doctors in the Metro.</h4>

        </span>
      </div>

      <div class="col-md-4">
        <br><br><br>
        <img src="img/home_who_we_are.jpg" class="img-responsive spacer center-block">
      </div>
  </div>
</div>

jsfiddle：https://jsfiddle.net/xp3zqLra/4/
当前状况

预期的布局

Answer 1

.row {
  display:flex;
}

.row > *
{
  align-self:end;
}

https://jsfiddle.net/xp3zqLra/6/

Answer 2

请删除这些不必要的br标签，并从一行中删除align-items-center类。

<div class="container">
      <div class="row">

          <div class="col-md-8 justify_text">
            <span>
            <h4 class="bold_font color-mwc-orange">WHO WE ARE</h4>
            <h4 class="color-mwc-blue">My White Card is an innovative collaboration of the recent revolutionary healthcare approach; The first of its kind beauty, health, and wellness membership that offers an array of the best discount coupons and unlimited services in pursuit of a convenient access through a Mobile App technology. </h4>
            <h4 class="color-mwc-blue">We offer different discount coupons from aesthetics, cosmetic surgeries, dental services, functional medicine, preventive healthcare and wellness programs from our Exclusive, Premiere and carefully curated clinics and excellent doctors in the Metro.</h4>
          </span>
          </div>

          <div class="col-md-4">
            <img src="https://via.placeholder.com/350

C/O https://placeholder.com/" class="img-responsive spacer center-block">
          </div>
      </div>
    </div>

这里是一个小提琴：https://jsfiddle.net/xp3zqLra/5/

引导程序列未对齐的文本和图像

2 个答案: