BootStrap5 概览（container和gird系统）

🚀 What .container actually does:
• Provides responsive horizontal padding and margins.
• Sets maximum width to keep content centered within the viewport.

✅ How to correctly activate the grid system:

You must explicitly use Bootstrap’s .row and .col-* classes inside the container:

<div class="container">
    <div class="row">
        <div class="col-4">Column 1</div>
        <div class="col-4">Column 2</div>
        <div class="col-4">Column 3</div>
    </div>
</div>

✅ Conclusion:
A Bootstrap .container does not automatically apply a grid layout.
You must explicitly use .row and .col-* classes.

🚀 gap-5 and g-5 both control spacing but in slightly different ways:

Class	Applies To	Meaning
gap-5	Flex/Grid layouts	CSS gap property only, space between child elements
g-5	Bootstrap rows (.row)	Adds gutters (padding and margins) specifically for grid columns

If you’re using the standard Bootstrap grid system (row + col classes), use g-* classes.
This adds both horizontal and vertical spacing properly.

If your container uses Flexbox (d-flex) directly without columns, you can use gap-*.