flex box 和 Bootstrap 不能在手机上协同工作吗？答案

【问题标题】：Do flex box and Bootstrap don't work together on the mobile?flex box 和 Bootstrap 不能在手机上协同工作吗？
【发布时间】：2015-12-05 14:45:27
【问题描述】：

将 CSS 规则 display:flex 应用于 Bootstrap 行似乎使 Bootstrap 列宽的控制权远离 Bootstrap。例如，如果我有一个类为 col-md-9 的列，它在 Android Chrome 浏览器上的宽度仅与它包含的文本宽度一样宽，而不是根据 Bootstrap 网格规则占据屏幕宽度的 75%。

这种行为的根本原因是什么？如何避免？

【问题讨论】：

标签： css twitter-bootstrap google-chrome mobile flexbox

【解决方案1】：

如果您将display:flex 应用于.row，则其所有直接子级的宽度将不再受其width 属性控制，因此块（引导）模型将不再起作用。将 Bootstrap 3 布局类（基于块模型）与 display:flex（弹性盒模型）混合不是一个好主意。

在 flexbox 模型中，如果 flex-direction 未设置，则具有 display: flex 的元素的第一级子元素的 width 不受 width 属性的影响，但受（不一定在此顺序）：

孩子flex-basis,
孩子flex-grow
孩子flex-shrink
子内容实际大小（宽度）
孩子的兄弟姐妹内容实际大小
父align-items（如果设置为stretch）
孩子align-self。（如果设置为stretch）

有很多属性，但它允许对任何可能的显示场景进行细粒度控制。如果父级上的flex-direction 设置为column，则其中一些将不适用于width，因为在这种情况下它们将适用于高度。

顺便说一下，Bootstrap 4 自带了 flexbox，但还没出来。

【讨论】：