rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Add example of responsive behavior for aspect ratios

Browse Source
This commit is contained in:
Mark Otto 2020-09-22 16:38:58 -07:00 committed by Mark Otto
parent 3b8c17029f
commit 73e5640405
2 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
site/assets/scss/_component-examples.scss
View File

@ -181,6 +181,15 @@
justify-content: center;
}
}
.bd-example-ratios-breakpoint {
.ratio-4x3 {
width: 16rem;
@include media-breakpoint-up(md) {
--aspect-ratio: 50%; // 2x1
}
}
}
.bd-example-modal {
background-color: #fafafa;

17
site/content/docs/5.0/helpers/ratio.md
View File

@ -55,6 +55,23 @@ For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ra
</div>
{{< /example >}}
This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.
{{< highlight scss >}}
.ratio-4x3 {
@include media-breakpoint-up(md) {
--aspect-ratio: 50%; // 2x1
}
}
{{< /highlight >}}
{{< example class="bd-example-ratios bd-example-ratios-breakpoint" >}}
<div class="ratio ratio-4x3">
<div class="ratio-item">4x3, then 2x1</div>
</div>
{{< /example >}}
## Sass map
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.