mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Update static form control
- Remove margin-bottom override in favor of .mb-0 utility class - Apply the input line-height styles to match - Remove the min-height to match the input
This commit is contained in:
parent
cab2d5951d
commit
55e130f88f
@ -516,14 +516,14 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
|
||||
|
||||
## Static controls
|
||||
|
||||
When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
|
||||
When you need to place plain text next to a form label within a form, use the `.form-control-static` class on an element of your choice. Using an element like `<p>` with a default margin? Be sure to use a margin override (as shown below).
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<p class="form-control-static">email@example.com</p>
|
||||
<p class="form-control-static mb-0">email@example.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
@ -132,12 +132,10 @@ select.form-control {
|
||||
// horizontal form layout.
|
||||
|
||||
.form-control-static {
|
||||
min-height: $input-height;
|
||||
// Size it appropriately next to real form controls
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
// Remove default margin from `p`
|
||||
margin-bottom: 0;
|
||||
line-height: $input-line-height;
|
||||
|
||||
&.form-control-sm,
|
||||
&.form-control-lg {
|
||||
|
Loading…
x
Reference in New Issue
Block a user