引导列未对齐的文本和图像答案

【问题标题】：Bootstrap columns unaligned text and image引导列未对齐的文本和图像
【发布时间】：2018-11-22 09:11:23
【问题描述】：

美好的一天，我有这个问题，我的引导行列未对齐，文本在 col-8 下，图像在 col-4 下。但是，即使它们在同一行中，文本和图像也是未对齐的。任何帮助将不胜感激，我有一个 js fiddle 链接来解决这个问题。

代码sn-p：

      <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/
当前状况

预期布局

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

.row {
  display:flex;
}

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

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

【讨论】：

添加行后即使在jsfiddle中图片也未对齐
糟糕，我删除了三个换行符，这是正确的更正。

【解决方案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/

【讨论】：