mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Change breakpoint-max implementation

Browse Source 
- The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
- The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.
This commit is contained in:
Martijn Cuppens
2020-04-18 13:02:26 +02:00
committed by Mark Otto
parent aee711bfa9
commit 7e28764e67
8 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/layout/breakpoints.md
+16 -9
View File
@@ -127,12 +127,12 @@ These Sass mixins translate in our compiled CSS using the values declared in our
We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
{{< highlight scss >}}
@include media-breakpoint-down(xs) { ... }
// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
// No media query necessary for xxl breakpoint as it has no upper bound on its width
@include media-breakpoint-down(xxl) { ... }
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
@@ -181,18 +181,25 @@ There are also media queries and mixins for targeting a single segment of screen
@include media-breakpoint-only(xxl) { ... }
{{< /highlight >}}
For example the `@include media-breakpoint-only(md) { ... }` will result in :
{{< highlight scss >}}
@media (min-width: 768px) and (max-width: 991.98px) { ... }
{{< /highlight >}}
### Between breakpoints
Similarly, media queries may span multiple breakpoint widths:
{{< highlight scss >}}
@include media-breakpoint-between(md, xl) { ... }
{{< /highlight >}}
Which results in:
{{< highlight scss >}}
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
{{< /highlight >}}
### Between breakpoints
The Sass mixin for targeting the same screen size range would be:
{{< highlight scss >}}
@include media-breakpoint-between(md, xl) { ... }
{{< /highlight >}}