Hopiu/bootstrap
1
0
Fork 0
mirror of https://github.com/Hopiu/bootstrap.git synced 2026-04-07 22:40:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixes #12759

Browse source 
Ensures proper sizing and alignment of input groups within inline and
navbar forms.

* Uses `inline-table` on the input group
* Nukes the widths to `width: auto`—without this, the parent input
group doesn’t size correctly and functions as `display: table;` or
`block`
This commit is contained in:
Mark Otto 2014-03-09 21:25:51 -07:00
parent b4d66b7f6b
commit a15c24410b
10 changed files with 62 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
dist/css/bootstrap-rtl.css vendored
View file

@ -3339,6 +3339,17 @@ select[multiple].input-lg {
vertical-align: middle;
}
.form-inline .input-group {
display: inline-table;
vertical-align: middle;
}
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control {
width: auto;
}
.form-inline .input-group > .form-control {
width: 100%;
}
@ -4902,6 +4913,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
vertical-align: middle;
}
.navbar-form .input-group {
display: inline-table;
vertical-align: middle;
}
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
width: auto;
}
.navbar-form .input-group > .form-control {
width: 100%;
}

2
dist/css/bootstrap-rtl.min.css vendored
View file

File diff suppressed because one or more lines are too long

18
dist/css/bootstrap.css vendored
View file

@ -2591,6 +2591,15 @@ select[multiple].input-lg {
width: auto;
vertical-align: middle;
}
.form-inline .input-group {
display: inline-table;
vertical-align: middle;
}
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn,
.form-inline .input-group .form-control {
width: auto;
}
.form-inline .input-group > .form-control {
width: 100%;
}
@ -3919,6 +3928,15 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
width: auto;
vertical-align: middle;
}
.navbar-form .input-group {
display: inline-table;
vertical-align: middle;
}
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
width: auto;
}
.navbar-form .input-group > .form-control {
width: 100%;
}

BIN
dist/css/bootstrap.css.map vendored
View file

Binary file not shown.

2
dist/css/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

6
docs/css.html
View file

@ -1649,6 +1649,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">

2
docs/dist/css/bootstrap-rtl.min.css vendored
View file

File diff suppressed because one or more lines are too long

BIN
docs/dist/css/bootstrap.css.map vendored
View file

Binary file not shown.

2
docs/dist/css/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

12
less/forms.less
View file

@ -368,6 +368,18 @@ input[type="checkbox"],
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto;
}
}
// Input groups need that 100% width though
.input-group > .form-control {
width: 100%;