为什么Bootstrap中Col组件内元素自动换行？布局问题咨询

原因分析 #

• 布局结构错误：你当前将虚线div和logo放在两个独立的StyledCol lg="6"列容器中，Grid布局下这两个列是同级独立区块，哪怕大屏下横向各占50%宽度，各自内部的元素也不可能跨列在同一行并排。如果需要两个元素横向对齐展示，必须把二者放在同一个StyledCol容器内。
• 父容器默认样式影响：如果是指div在自身所属的StyledCol内部自动换行，原因是StyledCol默认是块级布局，未配置white-space: nowrap属性，即便子元素设为inline-block，容器内的空白文本节点、内置的padding/margin占位都会触发换行。
• inline-block固有间隙问题：即便将两个元素放到同一父容器下，inline-block元素之间默认存在空白字符产生的间隙，若父容器宽度刚好等于两个子元素宽度之和，间隙会导致总宽度超出容器限制，触发换行。可给父容器添加font-size: 0消除间隙，或者直接改用flex布局实现横向排列，兼容性和可控性更高。

内容的提问来源于stack exchange，提问作者János