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

Merge pull request #20869 from twbs/static-control

Browse Source 
v4 Static form control sizing
This commit is contained in:
Mark Otto 2016-10-09 16:25:41 -07:00 committed by GitHub
commit 8187b9a2d3
2 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/forms.md
View File

@ -516,14 +516,14 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
## Static controls ## 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 %} {% example html %}
<form> <form>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label">Email</label> <label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10"> <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> </div>
<div class="form-group row"> <div class="form-group row">

7
scss/_forms.scss
View File

@ -132,12 +132,11 @@ select.form-control {
// horizontal form layout. // horizontal form layout.
.form-control-static { .form-control-static {
min-height: $input-height;
// Size it appropriately next to real form controls
padding-top: $input-padding-y; padding-top: $input-padding-y;
padding-bottom: $input-padding-y; padding-bottom: $input-padding-y;
// Remove default margin from `p` line-height: $input-line-height;
margin-bottom: 0; border: solid transparent;
border-width: 1px 0;
&.form-control-sm, &.form-control-sm,
&.form-control-lg { &.form-control-lg {