页脚社交图标在调整大小时不会 space 均匀显示

Question

codepen 下面

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

我制作了一个片段来解决您的问题：

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

  <footer>
    <div id="icons">
      <i>☼</i>
      <i>☂</i>
      <i>☃</i>
    </div>
  </footer>

干杯！

Answer 2

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

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

页脚社交图标在调整大小时不会 space 均匀显示

footer social icons dont space out evenly when resized

html

css

footer

twitter-bootstrap