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

Question

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

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

Answer 1

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

在Flexbox的模型，如果flex-direction没有设置，与display: flex元素的第一级的孩子都会有自己width不是由width财产influnenced，但（在这个顺序不一定）：

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

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

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