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

Posted 2023-03-21

【中文标题】页脚社交图标在调整大小时不会均匀分布

【英文标题】：footer social icons dont space out evenly when resized

【发布时间】：2018-10-17 02:01:06

【问题描述】：

下面的代码

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 个社交图​​标在调整为移动设备尺寸时保持比例，我让它们在所有大尺寸下看起来都很完美，

根据我的照片看起来有点扭曲

如何让他们排队？

谢谢

【问题讨论】：

请添加html和css代码

您能否扩展您为它们使用的 HTML 和 CSS，以及您正在使用的查询？这样我们就可以为您提供帮助。谢谢

您需要使用媒体查询并调整图标的边距/填充（margin-left: 5rem; padding-right: 3rem; padding-left: 3rem;）

【参考方案1】：

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

我已经做了一个 sn-p 来解决你的问题：

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>

干杯！

【参考方案2】：

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

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