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

Use calc() on .col-form-label padding calculations

Browse Source 
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:
Mark Otto 2016-12-25 14:35:57 -08:00 committed by Mark Otto
parent 04d48ba504
commit 96986bb4a3
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
scss/_forms.scss
View File

@ -95,20 +95,20 @@ select.form-control {
// For use with horizontal and inline forms, when you need the label text to
// align with the form controls.
.col-form-label {
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
margin-bottom: 0; // Override the `<label>` default
}
.col-form-label-lg {
padding-top: $input-padding-y-lg;
padding-bottom: $input-padding-y-lg;
padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
font-size: $font-size-lg;
}
.col-form-label-sm {
padding-top: $input-padding-y-sm;
padding-bottom: $input-padding-y-sm;
padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
font-size: $font-size-sm;
}