rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

update inline forms to resolve checkbox label with space in it and overlapping content, per #1969

Browse Source
This commit is contained in:
Mark Otto 2012-02-20 18:56:05 -08:00
parent 331c85724a
commit 143b3db2c9
5 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

9
docs/assets/css/bootstrap.css vendored
View File

@ -1001,9 +1001,18 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
.form-search .checkbox, .form-search .checkbox,
.form-inline .radio, .form-inline .radio,
.form-inline .checkbox { .form-inline .checkbox {
padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-left: 0;
margin-right: 3px;
}
.control-group { .control-group {
margin-bottom: 9px; margin-bottom: 9px;
} }

5
docs/base-css.html
View File

@ -910,7 +910,7 @@ For example, <code>section</code> should be wrapped as inline.
<input type="text" class="input-small" placeholder="Email"> <input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password"> <input type="password" class="input-small" placeholder="Password">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> Remember? <input type="checkbox"> Remember me
</label> </label>
<button type="submit" class="btn">Sign in</button> <button type="submit" class="btn">Sign in</button>
</form> </form>
@ -918,6 +918,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;form class="well form-inline"&gt; &lt;form class="well form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="Email"&gt; &lt;input type="text" class="input-small" placeholder="Email"&gt;
&lt;input type="password" class="input-small" placeholder="Password"&gt; &lt;input type="password" class="input-small" placeholder="Password"&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; Remember me
&lt;/label&gt;
&lt;button type="submit" class="btn"&gt;Go&lt;/button&gt; &lt;button type="submit" class="btn"&gt;Go&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>

5
docs/templates/pages/base-css.mustache vendored
View File

@ -834,7 +834,7 @@
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"> <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"> <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> {{_i}}Remember?{{/i}} <input type="checkbox"> {{_i}}Remember me{{/i}}
</label> </label>
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</form> </form>
@ -842,6 +842,9 @@
&lt;form class="well form-inline"&gt; &lt;form class="well form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt; &lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt;
&lt;input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"&gt; &lt;input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}}
&lt;/label&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Go{{/i}}&lt;/button&gt; &lt;button type="submit" class="btn"&gt;{{_i}}Go{{/i}}&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>

13
less/forms.less
View File

@ -475,14 +475,25 @@ select:focus:required:invalid {
.form-inline .input-prepend .add-on { .form-inline .input-prepend .add-on {
vertical-align: middle; vertical-align: middle;
} }
// Inline checkbox/radio labels // Inline checkbox/radio labels (remove padding on left)
.form-search .radio, .form-search .radio,
.form-search .checkbox, .form-search .checkbox,
.form-inline .radio, .form-inline .radio,
.form-inline .checkbox { .form-inline .checkbox {
padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
} }
// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"],
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-left: 0;
margin-right: 3px;
}
// Margin to space out fieldsets // Margin to space out fieldsets
.control-group { .control-group {