Bootstrap 3 的'border-box”框大小如何影响布局和网格系统计算？

了解 Bootstrap 3 向 Box-Sizing 的转变：Border-Box

当您将 Bootstrap 主题从版本 2.3.2 迁移到 3.0 时.0，您可能会在尺寸计算中遇到明显的差异。这主要是由于 bootstrap.css 中引入了以下样式：

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

更改背后的原因

Bootstrap 3 采用了“border-box” " 默认情况下所有元素的框大小值。这种方法提供了几个优点，特别是对于新的基于百分比的网格系统。

使用“border-box”，浏览器根据声明的宽度计算最终渲染的框。任何边框和填充值都包含在框中，使计算简单且一致。这消除了将流体网格与基于像素的装订线组合时进行复杂宽度计算的可能性。

网格系统的好处

向“边框框”的转变Bootstrap 网格系统的显着优势：

• 更简单调整大小： 列的声明宽度将成为实际呈现的宽度，无论边框或填充如何。
• 增强一致性： 所有列的宽度计算保持一致，从而简化布局和对齐。

附加优点

除了网格系统的优点之外，“border-box”框大小调整还提供了一般改进：

• 一致的边距和填充：边距和填充值独立于元素的内容，从而更可预测
• 改进的跨浏览器兼容性：“border-box”值确保不同浏览器之间的行为一致，减少潜在的不一致。

结论

采用“border-box”框大小调整Bootstrap 3 提供了许多优点，特别是对于新的网格系统。此更改简化了计算、增强了一致性并提高了跨浏览器兼容性。

以上是Bootstrap 3 的'border-box”框大小如何影响布局和网格系统计算？的详细内容。更多信息请关注PHP中文网其他相关文章！