在调整大小时，页脚社交图标不会均匀分布

Question

下面的代码

https://codepen.io/nightcoder21/pen/BxwVdJ

HTML下面

<section id="footer">
    <div class="container mb-1">
      <div class="row text-center text-xs-center text-sm-left text-md-left mb-2">



      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-5">
          <ul class="list-unstyled list-inline social text-center">
            <li class="list-inline-item"><a href="javascript:void();"><i class="fab fa-facebook"></i></a></li>
            <li class="list-inline-item"><a href="javascript:void();"><i class="fas fa-mobile-alt"></i></a></li>
            <li class="list-inline-item"><a href="javascript:void();"><i class="fas fa-envelope"></i></a></li>

          </ul>
        </div>
        </hr>
      </div>  
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white">
          <p>PC Handyman NZ - Small business / Home office IT solutions</p>
          <p class="h6">&copy All right Reversed.<a class="text-green ml-2" href="https://www.sunlimetech.com" target="_blank">PC Handyman 2018</a></p>
        </div>
        </hr>
      </div>  
    </div>
  </section>

在调整到移动尺寸时，我似乎无法让我的页脚中的3个社交图标保持成比例，我让它们在所有大尺寸上都看起来很完美，

根据我的照片

，它看起来很扭曲

我如何让他们排队？

由于

Answer 1

我想你应该看看flexbox。有一个非常好的教程here

我已经制作了解决问题的片段：

1     s10
2     s20
3     s92
6     s92
7     s31
8     s31  

footer{
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgb(250, 75, 83);
  width: 100%;
}
footer #icons{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer #icons i{
  font-size: 60px;
  font-style: normal;
  color: rgba(0,0,0,0.4);
  margin: 10px 30px;
}

@media (max-width: 520px){
  footer #icons{
    flex-direction: column;
  }
}

喝彩！

Answer 2

在这种情况下，您可以使用媒体查询来处理较小屏幕的样式

@media only screen and (max-width: 600px) {
    #footer ul.social li{
      padding: 3px 1rem;
    }
}