Use calc() on .col-form-label padding calculations
Fixes #21135. There's a height mismatch here because we're setting padding on the labels, while inputs get padding *and* a top+bottom border. This now uses calc to determine the exact height needed to match labels to inputs.
This commit is contained in:
parent
04d48ba504
commit
96986bb4a3
|
@ -95,20 +95,20 @@ select.form-control {
|
||||||
// For use with horizontal and inline forms, when you need the label text to
|
// For use with horizontal and inline forms, when you need the label text to
|
||||||
// align with the form controls.
|
// align with the form controls.
|
||||||
.col-form-label {
|
.col-form-label {
|
||||||
padding-top: $input-padding-y;
|
padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
|
||||||
padding-bottom: $input-padding-y;
|
padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
|
||||||
margin-bottom: 0; // Override the `<label>` default
|
margin-bottom: 0; // Override the `<label>` default
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-form-label-lg {
|
.col-form-label-lg {
|
||||||
padding-top: $input-padding-y-lg;
|
padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
|
||||||
padding-bottom: $input-padding-y-lg;
|
padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
|
||||||
font-size: $font-size-lg;
|
font-size: $font-size-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-form-label-sm {
|
.col-form-label-sm {
|
||||||
padding-top: $input-padding-y-sm;
|
padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
|
||||||
padding-bottom: $input-padding-y-sm;
|
padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
|
||||||
font-size: $font-size-sm;
|
font-size: $font-size-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue