Bootstrap 4：如何让页脚3列在移动端保持横向排列

嘿，我来帮你搞定这个布局问题～ 你遇到的情况是Bootstrap 4栅格系统的默认行为导致的，原来的代码里用了col-xs-4，但这个类在Bootstrap 4里已经被移除啦，超小屏幕（也就是移动端，<576px）对应的栅格类是直接用col-*，这就是为什么移动端会垂直堆叠的原因。

具体解决方案 #

• 把每个列的col-xs-4替换成col-4，这样在所有屏幕尺寸（包括最小的移动端）都会占用12栅格中的4份，3个加起来刚好填满一行，自然就能保持横向排列了。
• 如果移动端显示时内容太挤，可以加一点自定义样式调整字体大小、内边距，让布局更美观。

修改后的完整代码示例 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid footer">
  <div class="row">
    <!-- 替换col-xs-4为col-4，确保移动端横向排列 -->
    <div class="col-4 col-sm-6 col-md-7 col-lg-8">
      <p class="copyright text-left pl-3">Street Scents 2018&copy;</p>
    </div>
    <div class="col-4 col-sm-3 col-md-2 col-lg-2">
      <!-- 第二列内容示例 -->
      <p>关于我们</p>
    </div>
    <div class="col-4 col-sm-3 col-md-3 col-lg-2">
      <!-- 第三列内容示例 -->
      <p>联系我们</p>
    </div>
  </div>
</div>

<!-- 可选：自定义样式优化移动端显示 -->
<style>
.footer .copyright {
  font-size: 0.8rem; /* 移动端缩小字体避免拥挤 */
  margin: 0; /* 去掉默认边距，让布局更紧凑 */
}
.footer .row {
  align-items: center; /* 让列内元素垂直居中，视觉更整齐 */
  padding: 1rem 0; /* 给页脚添加上下内边距 */
}
</style>

关键说明 #

• col-4：这是Bootstrap 4针对超小屏幕的栅格类，确保在最窄的移动端也能让每个列占1/3宽度，3个列刚好填满一行。
• 保留你原来设置的col-sm-*、col-md-*、col-lg-*类，这样在平板、桌面等更大屏幕上，布局依然能按照你的需求自适应调整。
• 自定义样式部分是可选的，你可以根据自己的设计需求调整字体大小、边距等，让移动端的显示效果更理想。

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