为什么引导网格列换行

Question

当在浏览器中查看下面的HTML代码段时，第一行的最后一列会被包装，但是当浏览器宽度减小时，第二行中的所有列都不会被包装。我的印象是，如果使用col-xs- *类，则列不会叠加。我需要做什么来确保第一行的最后一列不包装？

{{1}}

Answer 1

这是因为第一列包含＆＃34; a＆＃34;将屏幕缩小到特定宽度后，即使将其指定为.col-xs-1，也会超过视口宽度的1/12。

这种意外行为是因为默认情况下Bootstrap列的左侧和右侧的padding为15px。您必须考虑到非缩放，不可用空间中的总共30px。这意味着在缩小超过某个屏幕宽度后，此最小值30px可能超过元素应占用的分配宽度（屏幕的1/12）。

快速计算表明，这将在30px * 12 = 360px的屏幕宽度后发生。在那之后，元素占据了屏幕的1/12以上，这会将.row末尾的元素向下推到下一行，因为根本没有足够的空间来拥有所有元素同一行上的元素。

我的建议？不要像这样使用.col-xs-1。在xs / sm断点处指定一些重新分配的列计数（因此这些元素被赋予更多的水平空间），或者从一开始就给它多于1列的空间。

希望这有帮助！如果您有任何问题，请告诉我。