仅导入Bootstrap Grid模块出现容器溢出问题，是否属于Bug？

Great question! Let’s unpack this issue clearly:

This is NOT a Bootstrap bug #

The overflow problem you’re seeing happens because the Bootstrap Grid module depends on Bootstrap’s core base styles to function correctly—but you didn’t import those alongside the grid.

Here’s the breakdown:

• Bootstrap sets box-sizing: border-box globally for all elements (and their pseudo-elements) in its _reboot.scss module (this replaces the older _normalize.scss in newer versions). This ensures that padding and borders don’t add extra width to elements, which is critical for the grid’s responsive calculations.
• When you only import bootstrap-grid.scss, it doesn’t include this base reset. Without border-box, browsers use the default content-box box model—so any padding or negative margins (like the -42px you saw) will push elements outside their container, causing overflow.

How to fix it properly #

You have two reliable options to resolve this without importing the full Bootstrap library:

Option 1: Import Bootstrap’s Reboot module alongside the grid #

Add this import before your grid import to get all necessary base styles (including box-sizing, default margin/padding resets, and cross-browser consistency):

@import "../../node_modules/bootstrap/scss/_reboot.scss";
@import "../../node_modules/bootstrap/scss/bootstrap-grid.scss";

This is the recommended approach because Reboot handles more than just box-sizing—it fixes inconsistent default styles across browsers that could cause other layout issues with the grid.

Option 2: Manually set global box-sizing #

If you only want to fix the box-sizing issue specifically, you can add this custom CSS before your grid styles:

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

Note: This won’t address other base style inconsistencies that Reboot fixes, so you might run into minor layout quirks later.

Will skipping base modules cause other issues? #

Yes—beyond the overflow problem, missing Reboot can lead to:

• Unpredictable default margins/paddings on elements like <p>, <ul>, or headings, which can break grid alignment
• Cross-browser inconsistencies in form elements or typography that the grid might interact with
• Unexpected spacing behavior in nested grid columns

Sticking with Option 1 ensures you get all the foundational styles the grid was built to work with, without bloat from unused Bootstrap components.

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