如何为1300×1900特殊比例屏幕适配Bootstrap 3栅格布局？

好问题！Bootstrap 3的栅格系统是完全基于视口宽度断点工作的（比如xs<768px、sm≥768px、md≥992px、lg≥1200px），它不会检测屏幕的宽高比，所以原生没有直接处理你这种场景的方案——必须手动通过CSS媒体查询来实现。

具体实现思路 #

核心是利用CSS的宽高比媒体查询，当视口的宽高比小于某个阈值（比如你的1300x1900屏幕宽高比约为0.68）时，强制让列元素占满100%宽度并取消浮动，模拟手机端的垂直堆叠效果。

代码示例 #

基础版：匹配所有窄比例屏幕

如果只要是宽高比接近竖屏的屏幕都要堆叠，可以写：

/* 当视口宽高比 ≤ 7/10（约0.7）时，触发堆叠 */
@media (max-aspect-ratio: 7/10) {
  .col-md-9, .col-md-3 {
    width: 100% !important; /* 覆盖Bootstrap的宽度设置，若自定义CSS在Bootstrap后加载可省略 */
    float: none !important;
    margin-left: 0;
    margin-right: 0;
  }
}

精准版：仅匹配你的特殊屏幕

如果只想针对1300px宽、1900px高的屏幕（宽高比13/19≈0.68），可以结合宽度和比例条件：

/* 宽度≥1200px（Bootstrap的lg断点）且宽高比≤13/19时触发堆叠 */
@media (min-width: 1200px) and (max-aspect-ratio: 13/19) {
  .col-md-9, .col-md-3 {
    width: 100%;
    float: none;
  }
}

为什么自定义Bootstrap栅格断点没用？ #

因为你尝试的自定义断点还是基于绝对宽度，而你的问题本质是屏幕宽高比不符合常规横屏，所以即使把断点调到1300px，也无法解决宽高比带来的布局需求——只有基于比例的媒体查询才能精准命中这类场景。

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