Bootstrap页脚col-md-4三列纵向堆叠无法水平排列问题

你使用的col-md-4是Bootstrap 4的响应式栅格类，默认规则为仅在浏览器视口宽度≥768px的中等及以上尺寸屏幕下，列才会水平相邻排布；视口宽度小于该阈值时，列会自动上下堆叠适配移动端。
如果宽屏状态下也出现列堆叠的问题，通常由以下原因导致：

• 项目中其他自定义CSS覆盖了Bootstrap栅格的默认flex布局规则，比如给.row容器或列元素设置了display: block、width: 100%等冲突属性
• Bootstrap CSS文件引入路径错误、加载失败，栅格样式没有生效

• 若需要所有屏幕尺寸下3列都保持单行排布、合计占满12栅格宽度，将三个列的col-md-4类替换为col-4即可。col-4无响应式断点限制，会始终保持每列占4份栅格宽度，3列刚好填满整行
• 全局排查项目内其他自定义CSS代码，删除给.row、.col-*类添加的破坏flex布局的属性
• 打开浏览器开发者工具的网络面板，确认Bootstrap CSS文件加载成功，无404等报错

自定义CSS部分 #

footer {
  background-color: #000000;
  background-size: cover;
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  padding-bottom: 5%;
  padding-top: 2%;
}

.westernaustralianmuseum {
  color: #AD8A51;
}

.footercontact {
  margin-top: 20px;
}

.footeroptions {
  margin-top: 20px;
}

.footerlocation {
  margin-top: 20px;
}

HTML部分 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<footer class="container-fluid">
  <!-- div for the main image to stretch s to the edge of the page-->
  <div class="container">
    <!-- div to hold the content in the middle of the page-->
    <div class="row">
      <!-- a row that gives us access to the BS columns-->
      <div class="col-4 footercontact">
        <h3>Contact</h3>
        <p>Email: reception@museum.wa.gov</p>
        <p>Phone: 1300 134 081</p>
        <h3>Follow us</h3>
        <img src="https://via.placeholder.com/50" alt="instagram icon">
        <img src="https://via.placeholder.com/50" alt="twitter icon">
        <img src="https://via.placeholder.com/50" alt="facebook icon">
        <img src="https://via.placeholder.com/50" alt="youtube icon">
      </div>
      <div class="col-4 footeroptions">
        <p><span class="westernaustralianmuseum">Western Australian Museum</span></p>
        <p>Membership</p>
        <p>Donate</p>
        <p>About</p>
      </div>
      <div class="col-4 footerlocation">
        <h3>Location & Hours</h3>
        <ul class="list-inline justify-content-center">
          <li class="list-item">47 Cliff Street</li>
          <li class="list-item">Fremantle, WA</li>
          <li class="list-item">6160</li>
          <li class="list-item">Open Daily:</li>
          <li class="list-item">0930Am to 0500Pm</li>
        </ul>
      </div>
    </div>
    <!-- row -->
  </div>
  <!-- container -->
</footer>
</body>

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