样式化 5 列 bootstrap 页脚

Question

对不起，如果这是一个愚蠢的问题，我才刚刚开始学习 HTML、CSS 和 bootstrap。我一直在尝试在 bootstrap 上获得一个五栏页脚。

到目前为止，我已经完成了五个栏目，但在尝试不同的事情数小时后我放弃了。我似乎无法弄清楚如何对齐这些列中的项目。你可以在这里看到完整的网站： https://stevenarroyave.github.io/UPTAKE/

和此处的回购： https://github.com/stevenarroyave/UPTAKE

这就是我想要的样子： https://drive.google.com/file/d/1bp2ZitBU4VGjPLhevdDZPBG5BeyEAO5X/view?usp=sharing

<footer>
  <div class="col-sm-12 text-left">
    <div class="row">
      <div class="col-sm-7 five-three">
        <div class="row">
          <div class="col-sm-4">
            <img id="logo" class="logo" src="img/FooterLogo.png"></img>
          </div>
          <div class="col-sm-4 text-left">
            <h5 class="text mb-4">UPTAKE</h5>   
            <ul class="list-inline mb-0">  
              <li class="list-inline-item">
                <h5>About us</h5>
              <li class="list-inline-item">
                <h5>Contact Us</h5>
              </li>
              <li class="list-inline-item">
                <h5>Blog</h5>
              </li>
            </ul>
          </div>
        <div class="col-sm-4 text-left">
          <h5 class="text mb-4">HELP</h5> 
          <ul class="list-inline mb-0">  
            <li class="list-inline-item">
              <h5>FAQ</h5>
              <li class="list-inline-item">
                <h5>Tips and suggestions</h5>
              </li>
              <li class="list-inline-item">
                <h5>Customer service</h5>
              </li>
            </ul>
          </div><!-- end inner row -->
        </div>
      </div>
      <div class="col-sm-5 five-two">
        <div class="row">
          <div class="col-sm-6 text-left">
            <h5 class="text mb-4">LEGAL</h5> 
            <ul class="list-inline mb-0">  
              <li class="list-inline-item">
                <h5>Privacy Notice</h5>
                <li class="list-inline-item">
                  <h5>Terms of use</h5>
                </li>
                <li class="list-inline-item">
                  <h5>How to use Uptake</h5>
                </li>
              </ul>
            </div>
            <div class="col-sm-6 text-left">
              <h5 class="text mb-4">LANGUAGE</h5> 
              <ul class="list-inline mb-0"> 
                <li class="list-inline-item">
                  <input type="text" placeholder="English">
                </li>
              </ul>
            </div>
        </div><!-- end inner row -->
      </div>
    </div><!-- end outer row -->
    <div class="row">
      <div class="col-12 text-right">
        <hr>
        <h5>Follow us!</h5>
        <i class="fab fa-facebook-f"></i>
        <i class="fab fa-twitter"></i>
        <i class="fab fa-google-plus-g"></i>
        <i class="fab fa-youtube"></i>
        <i class="fab fa-instagram"></i>
      </div>
    </div>
  </div>
</footer>

截至目前，我已经实现了 5 列，但如您所见，它们都从不同的高度开始，我希望它们从相同的高度开始，并阻止第一列上的徽标调整大小调整 window 大小时。

我也不知道如何让底部的粉红色图标显示在 "Follow us!"

旁边的同一行

在此先感谢您的帮助。

Answer 1

您需要定义项目与基线对齐。专门针对页脚行进行尝试。

.row {    align-items: baseline;}

Answer 2

我发现了一些错误并修复了此处使用红色标记箭头更改屏幕截图的问题。

你的输出是：

样式化 5 列 bootstrap 页脚

Styling a 5-column bootstrap footer

html

css

footer

bootstrap-4