Html CSS页脚对齐

Question

我开发了一个关于棱角的网站。一切都很顺利。现在我想调整一下页脚。

实际页脚

​

预期页脚

​

​

码

​

<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>

​

如何对齐页脚？任何帮助都将不胜感激。

Answer 1

您已经制作了图像头-12，这将使图像在整个容器中传播。请记住，在引导中，每个容器被拆分为12，所以说图像覆盖-12将覆盖所有这些容器。从外观上看，你想试试看。

或者，您可以实现同样的没有引导。把标志/由链接制造在一个div和浮动他们左。将其余内容放在另一个div中，并将其正确浮动。

Answer 2

从div中添加和清除mt-3(边缘-顶部)。