mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
improve inline-block of append/prepend inputs with font-size: 0;
This commit is contained in:
parent
cda48d41ba
commit
b1cb556503
3
docs/assets/css/bootstrap.css
vendored
3
docs/assets/css/bootstrap.css
vendored
@ -1269,6 +1269,7 @@ textarea::-webkit-input-placeholder {
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
margin-bottom: 5px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.input-prepend input,
|
||||
@ -1280,6 +1281,7 @@ textarea::-webkit-input-placeholder {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
*margin-left: 0;
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
-webkit-border-radius: 0 3px 3px 0;
|
||||
-moz-border-radius: 0 3px 3px 0;
|
||||
@ -1307,6 +1309,7 @@ textarea::-webkit-input-placeholder {
|
||||
height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
|
@ -965,11 +965,13 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<p>Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
|
||||
<span class="add-on">@</span>
|
||||
<input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||
<input class="span2" id="appendedInput" size="16" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -985,7 +987,9 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||
<span class="add-on">$</span>
|
||||
<input class="span2" id="appendedPrependedInput" size="16" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -998,11 +1002,14 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
|
||||
<input class="span2" id="appendedInputButton" size="16" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
|
||||
<input class="span2" id="appendedInputButtons" size="16" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
|
17
docs/templates/pages/base-css.mustache
vendored
17
docs/templates/pages/base-css.mustache
vendored
@ -896,11 +896,13 @@
|
||||
<p>{{_i}}Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.{{/i}}</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||
<span class="add-on">@</span>
|
||||
<input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||
<input class="span2" id="appendedInput" size="16" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -916,7 +918,9 @@
|
||||
<p>{{_i}}Use both classes and two instances of <code>.add-on</code> to prepend and append an input.{{/i}}</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<div class="input-prepend input-append">
|
||||
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||
<span class="add-on">$</span>
|
||||
<input class="span2" id="appendedPrependedInput" size="16" type="text">
|
||||
<span class="add-on">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
@ -929,11 +933,14 @@
|
||||
<p>{{_i}}Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
|
||||
<form class="bs-docs-example">
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
|
||||
<input class="span2" id="appendedInputButton" size="16" type="text">
|
||||
<button class="btn" type="button">Go!</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-append">
|
||||
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
|
||||
<input class="span2" id="appendedInputButtons" size="16" type="text">
|
||||
<button class="btn" type="button">Search</button>
|
||||
<button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
|
@ -380,12 +380,14 @@ textarea {
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
margin-bottom: 5px;
|
||||
font-size: 0;
|
||||
input,
|
||||
select,
|
||||
.uneditable-input {
|
||||
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
|
||||
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
|
||||
*margin-left: 0;
|
||||
font-size: @baseFontSize;
|
||||
vertical-align: middle;
|
||||
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
|
||||
// Make input on top when focused so blue border and shadow always show
|
||||
@ -402,6 +404,7 @@ textarea {
|
||||
height: @baseLineHeight;
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
font-size: @baseFontSize;
|
||||
font-weight: normal;
|
||||
line-height: @baseLineHeight;
|
||||
text-align: center;
|
||||
|
Loading…
x
Reference in New Issue
Block a user