在移动版本中垂直对齐内容答案

【问题标题】：Align contents vertically in mobile version在移动版本中垂直对齐内容
【发布时间】：2022-01-23 15:38:54
【问题描述】：

我对引导程序及其工作方式非常陌生，我一直在尝试在移动版本中垂直对齐网站内的内容，当前输出如下所示：当前输出：

如何垂直对齐联系人部分，使其正好位于新闻部分下方和教育部分上方

任何帮助将不胜感激

到目前为止我拥有的带有引导代码的 HTML：

<div class="container px-4 py-5" id="featured-3">
  <h2 class="pb-2 border-bottom">About Inholland</h2>
  <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
    <div class="feature col">
      <div class="feature-icon bg-#e3027f bg-gradient">
        <!--<svg class="bi" width="1em" height="1em"><use xlink:href="#collection" /></svg>-->
        <svg style="color: #fff" class="bi text-white" width="1em" height="1em">
          <use xlink:href="#collect-icon" class="bi bi-collection"></use>
        </svg>
      </div>
      <h2>News</h2>
      <p>View up to date news about inholland organisation and its employees</p>
      <a style="color: #e3027f" href="#" class="icon-link">
        read more
        <svg class="bi" width="1em" height="1em">
          <use xlink:href="#chevron-right" />
        </svg>
      </a>
    </div>
    <div class="feature col">
      <div class="feature-icon bg-#e3027f bg-gradient">
        <svg class="bi" width="1em" height="1em">
          <use xlink:href="#people-circle" />
        </svg>
      </div>
      <h2>Contacts</h2>
      <p>
        Learn more about our organisations chairman, faculty members and
        contacts to reach if you have any issues
      </p>
      <a style="color: #e3027f" href="#" class="icon-link">
        read more
        <svg class="bi" width="1em" height="1em">
          <use xlink:href="#chevron-right" />
        </svg>
      </a>
    </div>
    <div class="feature col">
      <div class="feature-icon bg-#e3027f bg-gradient">
        <!--<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2" /></svg>-->
        <svg class="bi" width="1em" height="1em">
          <use xlink:href="#toggle-icon" />
        </svg>
      </div>
      <h2>Education</h2>
      <p>
        Explore various types of courses provided by inholland university in
        different types of faculties
      </p>
      <a style="color: #e3027f" href="#" class="icon-link bg-#e3027f">
        read more
        <svg class="bi" width="1em" height="1em">
          <use xlink:href="#chevron-right" />
        </svg>
      </a>
    </div>
  </div>
</div>

【问题讨论】：

Class="align-middle"，使用垂直对齐实用程序更改元素的对齐方式。请注意，vertical-align 仅影响 inline、inline-block、inline-table 和表格单元格元素。如果它是块类型，您可以尝试类似 margin: 0 auto; (CSS)
我将您的代码复制粘贴到jsfiddle.net/deathstalkersid/sk2um0eL，它工作正常；当屏幕为xs 到md 时，新闻、联系人和教育垂直堆叠。我想还有其他东西弄乱了你的布局。

标签： html bootstrap-4

【解决方案1】：

在容器行中添加align-items-end：

<div class="row g-4 py-5 row-cols-1 row-cols-lg-3 align-items-end">

【讨论】：