Flex box和Bootstrap在手机上不能一起工作吗？

Question

将CSS规则display:flex应用于Bootstrap行似乎可以控制Bootstrap列的宽度远离Bootstrap。例如，如果我有一个类col-md-9的列，它在Android Chrome浏览器上的宽度与其包含的文本宽度相同，而不是占据屏幕宽度的75％，这取决于Bootstrap网格规则

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

Answer 1

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

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

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

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

顺便说一句，Bootstrap 4附带了flexbox，但还没有出来。