css - flex box 和 Bootstrap 不能在移动设备上协同工作吗？

Question

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

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

Answer 1

如果您将 display:flex 应用于 .row，则其所有直接子级的宽度将不再由它们的 width 控制属性，因此 block (Bootstrap) 模型将不再有效。将 Bootstrap 3 布局类(基于 block 模型)与 display:flex(flexbox 模型)混合不是一个好主意。

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

• child flex-basis,
• child flex-grow
• child flex-shrink
• 子内容实际大小(宽度)
• child 的 sibling 内容实际大小
• parent align-items(如果设置为stretch)
• child align-self。 (如果设置为 stretch)

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

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