Html 当使用flexbox在其包含行中垂直居中列时，如何使引导网格列堆叠在移动屏幕上？

我是一个新的开发人员，试图建立一个引导站点并运行。当然，我遇到过典型的垂直对齐新手问题。我认为通过向我的

.row

元素添加class

.vcenter

可以解决我的问题（至少在垂直居中的情况下）。

.vcenter

类（基本上）具有

display:flex

和

align items:center

属性/值对。这个想法来自于一个关于垂直对齐的非常好的答案

但是当我调整浏览器窗口的大小时，网格列不会像它们应该的那样堆叠，即使我将

.col-xs-12

类应用于每一列。相反，如果窗口变得足够小，则列会以非常难看的方式重叠。要了解我在说什么，请导航到上面链接的bootply，然后单击手机图标打开手机大小的屏幕。如果你把窗户缩小到足够小的程度，就会出现难看的柱子重叠。更重要的是，列应该是堆叠的（如您关闭

.vcenter

类所见）

所以问题是我可以同时使用FlexBox和引导网格系统吗？或者在这种特殊情况下，两者之间是否存在固有的兼容性不足？我认为可能的解决方案是关闭移动屏幕的

display:flex

属性，或者使用

inline block

进行垂直对齐，但我正在寻找一个更基本的理论解释

下面是引导层中的代码：

HTML

蓝色大盒子
大红盒子

CSS

此处使用的CSS将在bootstrap.CSS之后应用*/ .蓝盒子{ 颜色：#FFF； 背景颜色：蓝色； } 雷德博克斯先生{ 颜色：#FFF； 背景色：红色； } /*FLEXBOX类*/ .vcenter{ 最小高度：100%；/*vh装置的备用高度*/ 最小高度：100vh； 显示器：flex； 对齐项目：居中； /*Bootply包括用于跨浏览器兼容性的属性*/ }

---

在最小宽度的媒体查询中，将所需内容放在较大的视口中

删除col-xs-12，这不是必需的，在最后一个column类下所有内容都是全宽度的，因此col md下的任何内容如果没有其他类，都是具有相同填充的全宽度

这里发生的事情是，如果你把样式放在媒体查询之外，它们适用于所有的视口大小，如果你把flexbox放在一个最小宽度内，它适用于该媒体查询，直到另一个媒体查询之后出现另一个值（如果有）

Hashem Qolami是一位摇滚明星，他的代码总是很可靠，但flex适用于现代浏览器，如果你想让它在IE 8上看起来不错，那么就使用display:table和display:table cell

---

注意：我没有缩进CSS，但是当样式在媒体查询中时，它们会缩进

添加媒体查询以将

.vcenter

更改为

显示：块在较小的屏幕上。阅读有关
flex
display属性的更多信息。“注意CSS列对flex容器没有影响。”谢谢，APAD1！关于css列为什么不影响flex容器的任何说明或参考资料？这将帮助您：）Antonio。这与APAD1链接的资源相同。然而，css技巧文章并没有解释为什么列不能与flex容器一起工作。我认为这需要更详细地查看CSS视觉格式上下文。将flexbox的内容粘贴到最小宽度：我想我的问题可能有点不清楚。每个人都以同样的方式回答。我知道我可以让.vcenter类在较小屏幕上消失（或者在较大屏幕上出现）。当我说“我想可能的解决方案是关闭移动屏幕的
display:flex
属性……”时，我认为这一点很清楚。我的问题不是让框在flex上下文之外堆叠，而是在flex上下文中堆叠。那么，如何保持
display:flex
处于启用状态，并且仍然让列堆叠？或者这是绝对不可能的？你会使用不同的css，但你会做媒体查询：
-moz-box-orient:vertical-网络工具包盒方向：垂直-webkit-flex-flow：列-ms-flex方向：列；柔性流动：柱