Bootstrap 3中xs断点为何默认使div垂直堆叠？

嘿，这问题我之前也碰到过，给你拆解下可能的原因：

• 没把列放在.row容器里
  Bootstrap 3的栅格列（.col-xs-*类）必须嵌套在.row中才能正常水平排列。.row不仅能抵消外层容器的内边距，还通过内置的清除浮动逻辑，保证列元素能按照浮动规则横向排布。如果直接把带.col-xs-*的div丢到.container或者普通容器里，很可能因为缺少这个布局上下文导致列换行垂直显示。

• 列的总宽度超出12列限制
  Bootstrap 3的栅格系统是基于12列布局的，要是你给多个列设置的.col-xs-*数值加起来超过12（比如两个.col-xs-7，总宽度14），超出的列就会自动换行，看起来就是垂直排列了。

• 自定义CSS覆盖了Bootstrap的浮动样式
  .col-xs-*类默认是float: left来实现水平排列的，如果你的自定义CSS里给这些div加了float: none、display: block或者clear: both之类的样式，就会把Bootstrap的默认布局冲掉，导致列变成垂直堆叠。

• Bootstrap CSS文件没正确加载
  如果页面里的Bootstrap CSS路径错了或者加载失败，.col-xs-*的样式根本没生效，div就会保持默认的块级元素特性，自然是垂直排列的。

你可以对照这几点排查下，应该能找到问题所在～

内容的提问来源于stack exchange，提问作者johnny