知识卡片

栅格系统的负外边距抵消技巧

专业/工作 · 170

内容

Bootstrap栅格系统中,.row的左右外边距为-15px,.container与每一列的内边距为15px,二者相互抵消,使首尾两列贴齐容器边界、中间各列靠内边距形成间隔。这种”外层负margin+内层正padding”是浮动布局年代常见的留白手法;脱离栅格单独使用row时若忘记补回15px的padding,内容会溢出容器。

参考来源

《深入理解Bootstrap》第2章《整体架构》