rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Proposal

Browse Source
This commit is contained in:
louismaximepiton 2023-01-17 09:54:54 +01:00 committed by Mark Otto
parent 5dc7f4c165
commit 16aff741ec
3 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -134,7 +134,7 @@
background-color: rgba(var(--bd-violet-rgb), .15);
}
.bd-example-flex div {
.bd-example-flex div:not(.vr) {
background-color: rgba(var(--bd-violet-rgb), .15);
border: 1px solid rgba(var(--bd-violet-rgb), .3);
}

32
site/content/docs/5.3/helpers/stacks.md
View File

@ -17,11 +17,11 @@ Heads up! Support for gap utilities with flexbox was recently added to Safari, s
Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items.
{{< example >}}
{{< example class="bd-example-flex" >}}
<div class="vstack gap-3">
<div class="bg-body-tertiary border">First item</div>
<div class="bg-body-tertiary border">Second item</div>
<div class="bg-body-tertiary border">Third item</div>
<div class="p-2">First item</div>
<div class="p-2">Second item</div>
<div class="p-2">Third item</div>
</div>
{{< /example >}}
@ -29,32 +29,32 @@ Use `.vstack` to create vertical layouts. Stacked items are full-width by defaul
Use `.hstack` for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use `.gap-*` utilities to add space between items.
{{< example >}}
{{< example class="bd-example-flex" >}}
<div class="hstack gap-3">
<div class="bg-body-tertiary border">First item</div>
<div class="bg-body-tertiary border">Second item</div>
<div class="bg-body-tertiary border">Third item</div>
<div class="p-2">First item</div>
<div class="p-2">Second item</div>
<div class="p-2">Third item</div>
</div>
{{< /example >}}
Using horizontal margin utilities like `.ms-auto` as spacers:
{{< example >}}
{{< example class="bd-example-flex" >}}
<div class="hstack gap-3">
<div class="bg-body-tertiary border">First item</div>
<div class="bg-body-tertiary border ms-auto">Second item</div>
<div class="bg-body-tertiary border">Third item</div>
<div class="p-2">First item</div>
<div class="p-2">Second item</div>
<div class="p-2">Third item</div>
</div>
{{< /example >}}
And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
{{< example >}}
{{< example class="bd-example-flex" >}}
<div class="hstack gap-3">
<div class="bg-body-tertiary border">First item</div>
<div class="bg-body-tertiary border ms-auto">Second item</div>
<div class="p-2">First item</div>
<div class="p-2">Second item</div>
<div class="vr"></div>
<div class="bg-body-tertiary border">Third item</div>
<div class="p-2">Third item</div>
</div>
{{< /example >}}

8
site/content/docs/5.3/helpers/vertical-rule.md
View File

@ -35,11 +35,11 @@ Vertical rules scale their height in flex layouts:
They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
{{< example >}}
{{< example class="bd-example-flex" >}}
<div class="hstack gap-3">
<div class="bg-body-tertiary border">First item</div>
<div class="bg-body-tertiary border ms-auto">Second item</div>
<div class="p-2">First item</div>
<div class="p-2 ms-auto">Second item</div>
<div class="vr"></div>
<div class="bg-body-tertiary border">Third item</div>
<div class="p-2">Third item</div>
</div>
{{< /example >}}