Html 使flex尊重引导列属性

我使用了

display:flex

以确保我使用

class=“col-md-6”

时单元格的高度相同。但是，这导致在不同屏幕大小上查看内容时，我的单元格不会发生变化。那么，我应该如何编写flex代码来保持高度并同时尊重bootstrap的列属性呢

---

也许最好放弃预制课程，自己动手。flex属性允许您选择宽度，并根据容器中的空间大小为其提供收缩或增长选项。这样，如果删除一列，其他列将增长/收缩以填充其余空间

当Flexbox变得对浏览器友好时，我放弃了引导，我没有回头看。它为我节省了很多时间和代码。以下是一篇文章，以了解有关Magic flex的更多信息：

请注意，直到屏幕大于500px，媒体查询才允许flex启动。这就是我做手机的方式，因为它只是把div按自然的方式堆叠起来。您可以执行多个媒体查询，以控制不同屏幕大小的.col宽度，以便为不同的设备定制外观

请注意：stackoverflow上的代码编辑器需要扩展，以便在您调整浏览器大小时启动媒体查询

@介质（最小宽度：500px）{
.flex{display:flex；}
.col{flex:1116.666666 7%；}
}

第1栏

第2栏

第3栏

第4栏

第1栏

第5栏

第6栏

有点可笑，flex将在本周末发布。我一直在“编码”一个flexbox.css文件，以加快我自己的工作流程（无论是在工作场所还是在工作之外）。我已经把它上传到github，所以我可以在任何需要的时候得到它，所以我想我也可以把它的链接给你：。希望能有所帮助。首先，代码片段应该在问题中，其次，使用Bootstrap4。它基于Flexbox，而旧的3.xx不是。