为何两个div横向排列？Footer布局异常求助

问题原因 #

你的.foot容器设置了display: flex，而Flexbox默认的排列方向是横向（row），所以内部包含标题和按钮的两个div会并排显示，这就是垂直布局失效的核心原因。

解决方案 #

方案1：修改自定义CSS

给.foot添加flex-direction: column属性，强制子元素垂直排列，还可以通过gap属性调整两个区域的间距：

.foot {
  background-color: #152238;
  width: 100%;
  height: 60vh;
  border-top: solid 2px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column; /* 强制垂直排列 */
  gap: 2rem; /* 可选：增加标题与按钮区域的间距 */
}

方案2：利用Bootstrap内置类

既然你已经引入了Bootstrap，可以直接用它的flex工具类，无需修改CSS：

<footer>
  <div class="foot flex-column gap-3"> <!-- 添加flex-column实现垂直布局，gap-3控制间距 -->
    <div>
      <h2>Shop</h2>
    </div>
    <div>
      <button class="btn btn-info gmail"><i class="fa-regular fa-envelope"></i> Gmail</button>
      <button class="btn btn-info insta"><i class="fa-brands fa-instagram"></i> Instagram</button>
      <button class="btn btn-info tiktok"><i class="fa-brands fa-tiktok"></i> TikTok</button>
    </div>
  </div>
</footer>

额外提示 #

你代码中使用了Font Awesome图标，但没有引入它的CDN资源，图标可能无法正常显示，需要在头部添加：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

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