Angular项目页脚对齐问题：如何通过HTML/CSS调整实现预期布局

问题 #

我用Angular开发了一个网站，所有功能运行正常，现在需要调整页脚的排版对齐。

当前实际页脚效果

预期页脚效果

相关代码

<footer>
  <div class="row">
    <div class="col-12">
      <img src="../../assets/img/logo.svg" alt="" class="img-fluid" />
    </div>
    <div class="col-md-3 col-12">
      <p>
        <b>Manufactured by:</b>
      </p>
    </div>
    <div class="col-md-2 col-6 mt-lg-0 mt-3">
      <ul class="nav-menu">
        <li>
          <a [routerLink]="['/']">Home</a>
        </li>
        <li>
          <a href="#aboutUs">About us</a>
        </li>
        <li>
          <a href="#faqs">Faqs</a>
        </li>
        <li>
          <a [routerLink]="['/latest-recipes']">recipes</a>
        </li>
        <li>
          <a [routerLink]="['/stores']">Stores</a>
        </li>
        <!-- <li>
                      <a  [routerLink]="['/where-to-buy']">where to buy</a>
                  </li> -->
      </ul>
    </div>
    <div class="col-md-2 col-6 mt-lg-0 mt-3">
      <ul class="px-0">
        <li><a href="">Privacy & Policy</a></li>
        <li><a href="">Terms & Condition</a></li>
      </ul>
    </div>
    <div class="col-md-3 col-12">
      <h1>Karachi Office</h1>
      <p></p>
      <h1>Lahore Office</h1>
      <p></p>
      <div class="social-icon d-flex align-items-center">
        <a href=""><i class="fab fa-facebook-f"></i></a>
        <a href=""><i class="fab fa-twitter"></i></a>
        <a href=""><i class="fab fa-instagram"></i></a>
      </div>
    </div>
    <div class="col-md-2 col-12">
      <img src="../../assets/img/ebs.png" class="img-fluif" />
    </div>
  </div>
</footer>

请问我该如何调整实现页脚对齐？

解决方案 #

你当前用的是Bootstrap栅格系统，按下面的步骤调整即可实现预期对齐效果：

• 给页脚的row添加align-items-start类，让所有列默认从顶部开始对齐，避免默认的等高拉伸导致的内容错位。
• 修正代码里的拼写错误：右侧ebs图片的class写错成了img-fluif，改成正确的img-fluid，避免图片溢出容器。
• 把办公地址的h1标签换成h5或者自定义字号的标签，h1字号过大是当前地址区块和其他列不对齐的主要原因之一。
• 给所有列里的ul、p标签添加统一的边距重置，清除浏览器默认样式带来的间距差异，追加下面的自定义CSS即可：

footer ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 1rem;
}
footer ul li {
  margin-bottom: 0.5rem;
}
footer p, footer h5 {
  margin-top: 0;
  margin-bottom: 1rem;
}
/* 移动端适配 */
@media (max-width: 767px) {
  footer .col-6, footer .col-12 {
    margin-bottom: 1.5rem;
  }
}

如果需要logo和下方内容有统一的左右边距，给外层footer加container类即可。

内容的提问来源于stack exchange，提问作者Moeez