Html 具有可变宽度列的引导网格

Boostrap中是否有方法根据视口的宽度调整网格列？我有以下页面，其中第一列是

col-md-3

，第二列是

col-md-9

：

当用户在左侧列中选择文件夹时，右侧列应显示文件列表。但是列宽保持不变，如果我稍微减小屏幕宽度，右边的列就会移到左边列的下面。然后，左边的列填充了屏幕的高度和宽度，而下面的文件列表列不可见，这导致了非常糟糕的用户体验

---

是否有某种方法（最好是在引导中）可以让列根据屏幕宽度按比例调整其宽度，或者是否有其他方法可以使用类似的网格来引导？

您可以简单地使用css网格来实现这一点

正文{
保证金：0；
}
.集装箱{
显示：网格；
网格模板：100vh/重复（12，1fr）；
颜色：#fff；
}
.container>div{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字号：2em；
}
.左面板{
网格柱：1/4；
背景：#F7A072；
}
.右面板{
网格柱：4/-1；
背景：#0FA3B1；
}

左边
赖特

是否可能重复？您可以将类

col-md-3

更改为

col-sm-3

，这样，当它占据整个宽度时，断点位于较小的视口中，也可以对其他列执行相同的操作。但是宽度是固定的，分别是可用宽度的3/12和9/12。@Jeremy他正在单独使用bootstrap-v3，因此类名助手与v4不同。[]网格列根据视口的宽度进行调整，这就是-md-所做的，它使它们彼此位于下方，在567像素以下的视口中占据100%的宽度。您还可以使用-xs-、-sm-和-lg-（在“网格选项”中）。还是我理解错了？@Fecosos哦，我注意到，编辑了它