mirror of https://github.com/twbs/bootstrap.git
Drop clearfix helper for display: flow-root
This commit is contained in:
parent
eda99074f8
commit
6bdca8c814
|
@ -81,7 +81,7 @@ $utilities: map.merge(
|
|||
print: true,
|
||||
property: display,
|
||||
class: d,
|
||||
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
|
||||
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
|
||||
),
|
||||
// scss-docs-end utils-display
|
||||
// scss-docs-start utils-shadow
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
@use "../mixins/clearfix" as *;
|
||||
|
||||
@layer helpers {
|
||||
.clearfix {
|
||||
@include clearfix();
|
||||
}
|
||||
}
|
|
@ -1,4 +1,3 @@
|
|||
@forward "clearfix";
|
||||
@forward "color-bg";
|
||||
@forward "colored-links";
|
||||
@forward "focus-ring";
|
||||
|
|
|
@ -100,7 +100,6 @@
|
|||
icon: magic
|
||||
icon_color: orange
|
||||
pages:
|
||||
- title: Clearfix
|
||||
- title: Color & background
|
||||
- title: Colored links
|
||||
- title: Focus ring
|
||||
|
|
|
@ -20,6 +20,7 @@ As such, the classes are named using the format:
|
|||
Where *value* is one of:
|
||||
|
||||
- `none`
|
||||
- `flow-root`
|
||||
- `inline`
|
||||
- `inline-block`
|
||||
- `block`
|
||||
|
@ -34,6 +35,14 @@ The display values can be altered by changing the `display` values defined in `$
|
|||
|
||||
The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `xxl` screens.
|
||||
|
||||
## Clearfix
|
||||
|
||||
We've removed the clearfix helper class in v6 as it's outdated and no longer needed. Insated, use the `display: flow-root` utility, `.d-flow-root`. This forces a container element to create a new block formatting context without the clearfix hack.
|
||||
|
||||
<Example code={`<div class="d-flow-root">
|
||||
<div class="float-end px-3 py-2 border rounded-3">Floated element</div>
|
||||
</div>`} />
|
||||
|
||||
## Examples
|
||||
|
||||
<Example code={`<div class="d-inline p-2 text-bg-primary">d-inline</div>
|
||||
|
@ -77,6 +86,7 @@ To show an element only on a given interval of screen sizes you can combine one
|
|||
Change the `display` value of elements when printing with our print display utility classes. Includes support for the same `display` values as our responsive `.d-*` utilities.
|
||||
|
||||
- `.d-print-none`
|
||||
- `.d-print-flow-root`
|
||||
- `.d-print-inline`
|
||||
- `.d-print-inline-block`
|
||||
- `.d-print-block`
|
||||
|
|
Loading…
Reference in New Issue