页脚VS Code本地预览正常 上线后垂直排列 如何改为横向行布局

核心故障原因 #

你本地预览正常、部署后布局变垂直的核心原因是：

• 你给页脚各列设置了flex、flex-basis等弹性布局属性，但承载这些列的父容器.row没有显式定义display: flex。本地预览时你大概率是引入了Bootstrap这类前端框架，框架内置的.row类自带弹性布局属性，而部署后框架资源加载失败、路径配置错误或者版本不匹配，导致.row的flex属性失效，所有列就变成了默认的块级元素垂直排列。
• 同时你现有代码还有几处语法错误和结构问题，也会影响布局稳定性：
  1. CSS中写的.ul是错误写法，加点代表选择class名为ul的元素，你要清除列表默认样式应该直接写ul
  2. .footer2的padding属性里20 px多了空格，正确写法是20px，空格会导致该属性不生效
  3. 你把版权信息、分割线等全局内容放在了.row容器内部，会被当成flex项参与横向排布，挤占列的空间
  4. 没有给.row加换行属性，窄屏设备下布局会错乱

修正后代码 #

HTML代码 #

<div class="footer2">   
  <div class="container">
    <!-- 页脚列横向排布区域 -->
    <div class="row">
      <div class="footer-col-1">
        <h3>Download Our App</h3>
        <p>Download App for Android and ios mobile phone.</p>
        <div class="app-logo">
          <img src="https://blah blah.png" alt="应用商店">
          <img src="https://blah blah.png" alt="谷歌商店">
        </div>
      </div>
      <div class="footer-col-2">
        <img src="https://blah blah.png" alt="站点logo">
        <p>We're Committed To Helping You Become The<br>Best Version Of Yourself</p>
      </div>
      <div class="footer-col-3">
        <h3>USEFUL LINKS</h3>
        <ul>
          <li>PASSIVE INCOME</li>
          <li>SIDE HUSTLES</li>
          <li>DISCOVERIES</li>
          <li>WORKSPACE</li>           
        </ul>
      </div>
      <div class="footer-col-4">
        <h3>GET IN TOUCH</h3>
        <ul>
          <li> <img src="https:blah blah.png" alt="地址图标">730 3rd Ave NY 10017, USA</li>
          <li> <img src="https:blah blahs.png" alt="邮箱图标">talk2us@blah blah.com</li>
          <li>Return Policy</li>
          <li>Contact Us</li>                      
        </ul>
      </div>
    </div>
    <!-- 版权信息独立放在row外面 -->
    <div class="icons">
      <hr>
      <p class="copyright">Copyright 2021 - blah blah </p>
    </div>
  </div>
</div>

CSS代码 #

.footer2{
  background: #000;
  color: #8a8a8a;
  font-size: 14px;
  padding: 60px 0 20px; /* 去掉20和px之间的空格 */
}
.footer2 p{
  color: #8a8a8a;
}
.footer2 h3{
  color:#fff;
  margin-bottom: 20px;
}
/* 新增row的弹性布局属性 */
.footer2 .row{
  display: flex;
  flex-wrap: wrap; /* 窄屏自动换行 */
  gap: 20px; /* 列之间的间距，可自行调整 */
}
.footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4{
  min-width: 250px;
  margin-bottom: 20px;
}
.footer-col-1{
  flex-basis: 30%;
}
.footer-col-2{
  flex: 1;
  text-align: center;
}
.footer-col-2 img{
  width: 180px;
  margin-bottom: 20px;
}
.footer-col-3, .footer-col-4{
  flex-basis: 12%;
  text-align: center;
}
/* 去掉ul前面的点，清除默认边距 */
ul{
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

内容的提问来源于stack exchange，提问作者Philip Reifer