Question

我的网站的一部分是我在2个div上使用下面的CSS，以及一个<div> <a id=@space.EventId class="register-student-link" data-toggle="collapse" href=@spaceIdWith aria-expanded="false" aria-controls="collapseExample"> Register Student </a> </div>标记，以便将内容垂直对齐在中心。

问题在于，使用flex样式属性时，窗口是＆lt; 768px理想情况下，内容会改变布局，每个a会叠加在一起。

这种情况并没有发生，相反，这些列变得非常瘦，并且仍然并排显示。有没有什么办法解决这一问题？最好是试图远离表格格式化

col-md-4

Answer 1

您应该考虑两件事：

当您将display: flex应用于元素时，它将成为一个包含多个默认样式的Flex容器。

其中一个默认值为flex-direction: row，它沿水平轴对齐flex项（子元素）。要切换到垂直方向，您需要指定flex-direction: column。

另一个默认值为flex-wrap: nowrap，它会强制弹性项目保留在一行中（即使它们溢出容器）。

来自您的问题：

问题在于，当使用flex样式属性时，窗口是＆lt; 768px理想情况下，内容会改变布局，每个col-md-4 会堆叠在一起。这不会发生，而是发生列只是变得非常瘦，并显示仍然旁边侧。

听起来灵活物品没有包裹。尝试将其添加到Flex容器中：
```
flex-wrap: wrap;
```
如果您希望弹性项目在窗口为＆lt;时垂直堆叠。 768px，使用具有flex-direction属性的媒体查询。
```
@media screen and (max-width: 768px) { .your-selector-here {flex-direction: column;} }
```

有关浏览器支持的说明：

所有主流浏览器except IE < 10都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer中的更多详细信息。

flexbox中的Bootstrap列未包装在较小的屏幕上

1 个答案: