Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Container x-padding (1rem + 1rem) larger than row negative margins (-1.5rem) #31642

Closed
jeffhuang opened this issue Sep 14, 2020 · 0 comments · Fixed by #31649
Closed

Container x-padding (1rem + 1rem) larger than row negative margins (-1.5rem) #31642

jeffhuang opened this issue Sep 14, 2020 · 0 comments · Fixed by #31649

Comments

@jeffhuang
Copy link

I'm a little confused why the padding on containers,

  padding-right: 1rem;
  padding-left: 1rem;

is 2rem in total, but the row negative margins are -1.5rem in total

.row {
  --bs-gutter-x: 1.5rem;
  /* snip */
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}

This results in 0.25rem of padding on the left and right of the containers, and makes edge-to-edge a challenge. While it doesn't matter much in the examples because they use a white background, it makes edge-to-edge backgrounds a problem. Is this intentional or a bug? Because my interpretation of the documentation is that the negative margins on the rows should exactly counteract the padding on containers. When I set --bs-gutter-x to 2rem, the problem goes away.

Thanks for all the work on Bootstrap v5! I am very excited about the stable release.

@mdo mdo added this to Inbox in v5.0.0-alpha2 via automation Sep 14, 2020
mdo added a commit that referenced this issue Sep 14, 2020
- Replaces make-container mixin's padding-x param with gutter to match naming
- Changes value of container padding variable to match grid gutter width variable
- Uses local CSS variable for container padding

Fixes #31642
@mdo mdo moved this from Inbox to Review in v5.0.0-alpha2 Sep 14, 2020
v5.0.0-alpha2 automation moved this from Review to Shipped Sep 23, 2020
mdo added a commit that referenced this issue Sep 23, 2020
- Replaces make-container mixin's padding-x param with gutter to match naming
- Changes value of container padding variable to match grid gutter width variable
- Uses local CSS variable for container padding

Fixes #31642
olsza pushed a commit to olsza/bootstrap that referenced this issue Oct 3, 2020
- Replaces make-container mixin's padding-x param with gutter to match naming
- Changes value of container padding variable to match grid gutter width variable
- Uses local CSS variable for container padding

Fixes twbs#31642
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v5.0.0-alpha2
  
Shipped
Development

Successfully merging a pull request may close this issue.

2 participants