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

Configurable display utility classes (#27917)

Browse Source
This commit is contained in:
Martijn Cuppens 2018-12-29 03:54:58 +01:00 committed by XhmikosR
parent 952374654c
commit c0dfda964f
3 changed files with 9 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_variables.scss
View File

@ -1090,6 +1090,7 @@ $pre-scrollable-max-height: 340px !default;
// Utilities
$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
$overflows: auto, hidden !default;
$positions: static, relative, absolute, fixed, sticky !default;

24
scss/utilities/_display.scss
View File

@ -8,15 +8,9 @@
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.d#{$infix}-none { display: none !important; }
.d#{$infix}-inline { display: inline !important; }
.d#{$infix}-inline-block { display: inline-block !important; }
.d#{$infix}-block { display: block !important; }
.d#{$infix}-table { display: table !important; }
.d#{$infix}-table-row { display: table-row !important; }
.d#{$infix}-table-cell { display: table-cell !important; }
.d#{$infix}-flex { display: flex !important; }
.d#{$infix}-inline-flex { display: inline-flex !important; }
@each $value in $displays {
.d#{$infix}-#{$value} { display: $value !important; }
}
}
}
@ -26,13 +20,7 @@
//
@media print {
.d-print-none { display: none !important; }
.d-print-inline { display: inline !important; }
.d-print-inline-block { display: inline-block !important; }
.d-print-block { display: block !important; }
.d-print-table { display: table !important; }
.d-print-table-row { display: table-row !important; }
.d-print-table-cell { display: table-cell !important; }
.d-print-flex { display: flex !important; }
.d-print-inline-flex { display: inline-flex !important; }
@each $value in $displays {
.d-print-#{$value} { display: $value !important; }
}
}

2
site/docs/4.2/utilities/display.md
View File

@ -31,6 +31,8 @@ Where *value* is one of:
* `flex`
* `inline-flex`
The display values can be altered by changing the `$displays` variable and recompiling the SCSS.
The media queries effect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg` and `xl` screens.
## Examples