mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-30 15:29:06 +02:00
Code Issues Releases Wiki Activity

fixes #3384: add support for multiple inputs per line when using grid sizing

Browse Source
This commit is contained in:
Mark Otto
2012-07-09 20:49:17 -07:00
parent dbea3e2784
commit 93be608bf0
6 changed files with 129 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/base-css.html
View File

@@ -1074,7 +1074,7 @@ For example, <code>section</code> should be wrapped as inline.
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
<h4>Relative sizing</h4>
<form class="bs-docs-example">
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
@@ -1092,10 +1092,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;input class="input-xlarge" type="text"&gt;
&lt;input class="input-xxlarge" type="text"&gt;
</pre>
<p>
<span class="label label-info">Heads up!</span> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input.
</p>
<h4>Grid sizing</h4>
<p>Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.</p>
<form class="bs-docs-example">
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
@@ -1127,6 +1130,35 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;input class="span1" type="text"&gt;
&lt;input class="span2" type="text"&gt;
&lt;input class="span3" type="text"&gt;
</pre>
<p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls">
<input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<input class="span1" type="text" placeholder=".span1">
</div>
<div class="controls controls-row">
<input class="span3" type="text" placeholder=".span3">
<input class="span2" type="text" placeholder=".span2">
</div>
<div class="controls controls-row">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
</div>
<div class="controls controls-row">
<input class="span1" type="text" placeholder=".span1">
<input class="span4" type="text" placeholder=".span4">
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="controls controls-row"&gt;
&lt;input class="span4" type="text" placeholder=".span4"&gt;
&lt;input class="span1" type="text" placeholder=".span1"&gt;
&lt;/div&gt;
</pre>
<h3>Uneditable inputs</h3>