如何在Bootstrap 4网格系统中设置响应式页脚HTML5结构？

嘿，我明白你现在卡在Bootstrap 4网格系统的横竖屏适配上了——要让手机、平板这些设备竖屏时是图1样式，横屏自动切成图2样式，其实只需要结合Bootstrap的网格基础和CSS的横竖屏媒体查询就能解决，我给你一步步拆解：

核心思路 #

Bootstrap默认是按屏幕宽度断点来切换布局的，但我们这次要的是跟着设备方向走，所以核心就是：

• 先按竖屏需求写好基础布局（用Bootstrap自带的col-*类就行）
• 再用CSS媒体查询针对横屏状态，覆盖或调整布局样式，实现图2的效果

具体操作步骤 #

1. 先搭好竖屏的基础HTML结构 #

比如假设你竖屏时需要两列堆叠+一个通栏，就这么写：

<div class="container">
  <div class="row">
    <!-- 竖屏时的布局区块 -->
    <div class="col-12 col-sm-6 layout-block">内容区块1</div>
    <div class="col-12 col-sm-6 layout-block">内容区块2</div>
    <div class="col-12 layout-block">内容区块3</div>
  </div>
</div>

这里用col-12保证手机竖屏时全宽，col-sm-6让平板竖屏时分成两列，完全贴合你竖屏的需求。

2. 加横屏的样式调整 #

接下来写自定义CSS，当设备横屏时，把布局改成图2的样子：

/* 所有设备横屏时的通用调整 */
@media (orientation: landscape) {
  .layout-block {
    /* 比如横屏时统一改成三列 */
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

/* 如果平板横屏需要特殊布局，再加个宽度断点的媒体查询 */
@media (min-width: 768px) and (orientation: landscape) {
  .layout-block:nth-child(1) {
    /* 第一栏占一半宽度 */
    flex: 0 0 50%;
    max-width: 50%;
  }
  .layout-block:nth-child(2),
  .layout-block:nth-child(3) {
    /* 后面两栏各占25% */
    flex: 0 0 25%;
    max-width: 25%;
  }
}

这段代码会自动识别设备方向，横屏时直接替换网格的宽度比例，完全不用改HTML结构。

3. 进阶：横竖屏显示不同内容 #

如果你的图1和图2不只是布局变，还有内容差异，那可以加个自定义工具类：

/* 竖屏显示，横屏隐藏 */
@media (orientation: landscape) {
  .only-portrait {
    display: none !important;
  }
}

/* 横屏显示，竖屏隐藏 */
@media (orientation: portrait) {
  .only-landscape {
    display: none !important;
  }
}

然后在HTML里这么用：

<div class="only-portrait">只有竖屏才会看到我哦</div>
<div class="only-landscape">横屏专属内容来啦</div>

小提醒 #

• 别忘了确保你的页面已经正确引入Bootstrap 4的CSS文件，不然网格类不起作用
• orientation这个媒体查询属性兼容性超棒，不管是手机还是平板都能识别
• 如果布局特别复杂，也可以直接给横竖屏各做一套容器，用上面的工具类控制显示隐藏，更直观

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