From 93be608bf0a4b85ec3331ebcc14e40f99a1974f2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 20:49:17 -0700 Subject: fixes #3384: add support for multiple inputs per line when using grid sizing --- docs/base-css.html | 36 ++++++++++++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index 0c5bf0bea..88f443642 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1074,7 +1074,7 @@ For example, <code>section</code> should be wrapped as inline.

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Relative sizing

-
+
@@ -1092,10 +1092,13 @@ For example, <code>section</code> should be wrapped as inline. <input class="input-xlarge" type="text"> <input class="input-xxlarge" type="text"> +

+ Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

Grid sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

- +
@@ -1127,6 +1130,35 @@ For example, <code>section</code> should be wrapped as inline. <input class="span1" type="text"> <input class="span2" type="text"> <input class="span3" type="text"> + + +

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

+ +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+<div class="controls controls-row">
+  <input class="span4" type="text" placeholder=".span4">
+  <input class="span1" type="text" placeholder=".span1">
+</div>

Uneditable inputs

-- cgit v1.2.3