diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 3f372560cba591638124beafe2d97827a2905187..4de21bbf3645c6527d07ab16167dbf09c8ce176a 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -192,100 +192,174 @@
.offset1 {
margin-left: 8.333333333333332%;
}
- input[class*="span"]:first-child,
- textarea[class*="span"]:first-child,
- .uneditable-input[class*="span"]:first-child {
- margin-left: 0;
- }
- input[class*="span"]:last-child,
- textarea[class*="span"]:last-child,
- .uneditable-input[class*="span"]:last-child {
- margin-right: 0;
- }
input.span12,
textarea.span12,
+ select.span12,
.uneditable-input.span12 {
- width: 99.97589305281613%;
+ width: 97.43589743589743%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span11,
textarea.span11,
+ select.span11,
.uneditable-input.span11 {
- width: 91.64657754401344%;
+ width: 89.10256410256409%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span10,
textarea.span10,
+ select.span10,
.uneditable-input.span10 {
- width: 83.31689677843524%;
+ width: 80.76923076923077%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span9,
textarea.span9,
+ select.span9,
.uneditable-input.span9 {
- width: 74.98685075608152%;
+ width: 72.43589743589743%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span8,
textarea.span8,
+ select.span8,
.uneditable-input.span8 {
- width: 66.6564394769523%;
+ width: 64.10256410256409%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span7,
textarea.span7,
+ select.span7,
.uneditable-input.span7 {
- width: 58.325662941047554%;
+ width: 55.769230769230774%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span6,
textarea.span6,
+ select.span6,
.uneditable-input.span6 {
- width: 49.994521148367305%;
+ width: 47.43589743589744%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span5,
textarea.span5,
+ select.span5,
.uneditable-input.span5 {
- width: 41.663014098911525%;
+ width: 39.10256410256411%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span4,
textarea.span4,
+ select.span4,
.uneditable-input.span4 {
- width: 33.33114179268025%;
+ width: 30.769230769230766%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span3,
textarea.span3,
+ select.span3,
.uneditable-input.span3 {
- width: 24.998904229673464%;
+ width: 22.435897435897438%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span2,
textarea.span2,
+ select.span2,
.uneditable-input.span2 {
- width: 16.66630140989115%;
+ width: 14.1025641025641%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
input.span1,
textarea.span1,
+ select.span1,
.uneditable-input.span1 {
- width: 8.333333333333332%;
+ width: 5.769230769230768%;
margin-right: 1.282051282051282%;
margin-left: 1.282051282051282%;
}
+ input.offset12,
+ textarea.offset12,
+ select.offset12,
+ uneditable-input.offset12 {
+ margin-left: 101.28205128205128%;
+ }
+ input.offset11,
+ textarea.offset11,
+ select.offset11,
+ uneditable-input.offset11 {
+ margin-left: 92.94871794871794%;
+ }
+ input.offset10,
+ textarea.offset10,
+ select.offset10,
+ uneditable-input.offset10 {
+ margin-left: 84.61538461538463%;
+ }
+ input.offset9,
+ textarea.offset9,
+ select.offset9,
+ uneditable-input.offset9 {
+ margin-left: 76.28205128205128%;
+ }
+ input.offset8,
+ textarea.offset8,
+ select.offset8,
+ uneditable-input.offset8 {
+ margin-left: 67.94871794871794%;
+ }
+ input.offset7,
+ textarea.offset7,
+ select.offset7,
+ uneditable-input.offset7 {
+ margin-left: 59.61538461538462%;
+ }
+ input.offset6,
+ textarea.offset6,
+ select.offset6,
+ uneditable-input.offset6 {
+ margin-left: 51.282051282051285%;
+ }
+ input.offset5,
+ textarea.offset5,
+ select.offset5,
+ uneditable-input.offset5 {
+ margin-left: 42.948717948717956%;
+ }
+ input.offset4,
+ textarea.offset4,
+ select.offset4,
+ uneditable-input.offset4 {
+ margin-left: 34.61538461538461%;
+ }
+ input.offset3,
+ textarea.offset3,
+ select.offset3,
+ uneditable-input.offset3 {
+ margin-left: 26.28205128205128%;
+ }
+ input.offset2,
+ textarea.offset2,
+ select.offset2,
+ uneditable-input.offset2 {
+ margin-left: 17.948717948717945%;
+ }
+ input.offset1,
+ textarea.offset1,
+ select.offset1,
+ uneditable-input.offset1 {
+ margin-left: 9.615384615384613%;
+ }
.thumbnails {
margin-left: -30px;
}
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 3bba084f3160fa7e5a7451406645f66bb97c8ccb..49c45ca489fafcff6a74b768a450392979f4106b 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -975,136 +975,211 @@ textarea::-webkit-input-placeholder {
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
-.uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"] {
- xmargin-left: 0;
- xfloat: none;
-}
-
-.input-append input[class*="span"],
-.input-append .uneditable-input[class*="span"],
-.input-prepend input[class*="span"],
-.input-prepend .uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"],
-.row-fluid .input-prepend [class*="span"],
-.row-fluid .input-append [class*="span"] {
- display: inline-block;
-}
-
-.controls-row input[class*="span"]:first-child,
-.controls-row textarea[class*="span"]:first-child,
-.controls-row .uneditable-input[class*="span"]:first-child {
- margin-left: 0;
-}
-
-.controls-row input[class*="span"]:last-child,
-.controls-row textarea[class*="span"]:last-child,
-.controls-row .uneditable-input[class*="span"]:last-child {
+.uneditable-input[class*="span"] {
+ float: none;
margin-right: 0;
+ margin-left: 0;
}
.controls-row input.span12,
textarea.span12,
+select.span12,
.uneditable-input.span12 {
- width: 99.97510185604347%;
+ width: 97.87234042553192%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span11,
textarea.span11,
+select.span11,
.uneditable-input.span11 {
- width: 91.64591821336955%;
+ width: 89.53900709219857%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span10,
textarea.span10,
+select.span10,
.uneditable-input.span10 {
- width: 83.31635732609024%;
+ width: 81.20567375886526%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span9,
textarea.span9,
+select.span9,
.uneditable-input.span9 {
- width: 74.98641919420552%;
+ width: 72.87234042553192%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span8,
textarea.span8,
+select.span8,
.uneditable-input.span8 {
- width: 66.6561038177154%;
+ width: 64.53900709219857%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span7,
textarea.span7,
+select.span7,
.uneditable-input.span7 {
- width: 58.32541119661988%;
+ width: 56.20567375886525%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span6,
textarea.span6,
+select.span6,
.uneditable-input.span6 {
- width: 49.99434133091897%;
+ width: 47.87234042553192%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span5,
textarea.span5,
+select.span5,
.uneditable-input.span5 {
- width: 41.66289422061264%;
+ width: 39.53900709219859%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span4,
textarea.span4,
+select.span4,
.uneditable-input.span4 {
- width: 33.33106986570092%;
+ width: 31.205673758865245%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span3,
textarea.span3,
+select.span3,
.uneditable-input.span3 {
- width: 24.998868266183795%;
+ width: 22.872340425531917%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span2,
textarea.span2,
+select.span2,
.uneditable-input.span2 {
- width: 16.666289422061265%;
+ width: 14.53900709219858%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span1,
textarea.span1,
+select.span1,
.uneditable-input.span1 {
- width: 8.333333333333332%;
+ width: 6.205673758865247%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
+.controls-row input.offset12,
+textarea.offset12,
+select.offset12,
+uneditable-input.offset12 {
+ margin-left: 101.06382978723404%;
+}
+
+.controls-row input.offset11,
+textarea.offset11,
+select.offset11,
+uneditable-input.offset11 {
+ margin-left: 92.7304964539007%;
+}
+
+.controls-row input.offset10,
+textarea.offset10,
+select.offset10,
+uneditable-input.offset10 {
+ margin-left: 84.39716312056738%;
+}
+
+.controls-row input.offset9,
+textarea.offset9,
+select.offset9,
+uneditable-input.offset9 {
+ margin-left: 76.06382978723404%;
+}
+
+.controls-row input.offset8,
+textarea.offset8,
+select.offset8,
+uneditable-input.offset8 {
+ margin-left: 67.7304964539007%;
+}
+
+.controls-row input.offset7,
+textarea.offset7,
+select.offset7,
+uneditable-input.offset7 {
+ margin-left: 59.39716312056738%;
+}
+
+.controls-row input.offset6,
+textarea.offset6,
+select.offset6,
+uneditable-input.offset6 {
+ margin-left: 51.06382978723404%;
+}
+
+.controls-row input.offset5,
+textarea.offset5,
+select.offset5,
+uneditable-input.offset5 {
+ margin-left: 42.73049645390071%;
+}
+
+.controls-row input.offset4,
+textarea.offset4,
+select.offset4,
+uneditable-input.offset4 {
+ margin-left: 34.39716312056737%;
+}
+
+.controls-row input.offset3,
+textarea.offset3,
+select.offset3,
+uneditable-input.offset3 {
+ margin-left: 26.06382978723404%;
+}
+
+.controls-row input.offset2,
+textarea.offset2,
+select.offset2,
+uneditable-input.offset2 {
+ margin-left: 17.730496453900706%;
+}
+
+.controls-row input.offset1,
+textarea.offset1,
+select.offset1,
+uneditable-input.offset1 {
+ margin-left: 9.397163120567374%;
+}
+
+.input-append input[class*="span"],
+.input-append .uneditable-input[class*="span"],
+.input-prepend input[class*="span"],
+.input-prepend .uneditable-input[class*="span"] {
+ display: inline-block;
+}
+
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
@@ -1372,8 +1447,8 @@ select:focus:required:invalid:focus {
.input-append .uneditable-input,
.input-prepend .uneditable-input {
position: relative;
- margin-bottom: 0;
- *margin-left: 0;
+ float: none;
+ margin: 0;
font-size: 14px;
vertical-align: top;
-webkit-border-radius: 0 3px 3px 0;
@@ -1390,6 +1465,15 @@ select:focus:required:invalid:focus {
z-index: 2;
}
+.input-append input[class*="span"],
+.input-prepend input[class*="span"],
+.input-append select[class*="span"],
+.input-prepend select[class*="span"],
+.input-append .uneditable-input[class*="span"],
+.input-prepend .uneditable-input[class*="span"] {
+ margin: 0;
+}
+
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
diff --git a/docs/base-css.html b/docs/base-css.html
index b87c2782997e091fb3396cf0a79f78a523b3b723..8a18ab9a3a07b5edb9e0eebbebdbb9583d8bbae6 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1131,20 +1131,22 @@ For example, <code><section></code> should be wrapped as inlin
<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">
+ <input id="prependedInput" size="16" type="text" placeholder="Username">
</div>
<br>
<div class="input-append">
- <input class="span2" id="appendedInput" size="16" type="text">
+ <input id="appendedInput" size="16" type="text">
<span class="add-on">.00</span>
</div>
</form>
<pre class="prettyprint linenums">
<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 id="prependedInput" size="16" type="text" placeholder="Username">
</div>
<div class="input-append">
- <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+ <input id="appendedInput" size="16" type="text">
+ <span class="add-on">.00</span>
</div>
</pre>
@@ -1153,13 +1155,15 @@ For example, <code><section></code> should be wrapped as inlin
<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">
+ <input id="appendedPrependedInput" size="16" type="text">
<span class="add-on">.00</span>
</div>
</form>
<pre class="prettyprint linenums">
<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 id="appendedPrependedInput" size="16" type="text">
+ <span class="add-on">.00</span>
</div>
</pre>
@@ -1167,46 +1171,49 @@ For example, <code><section></code> should be wrapped as inlin
<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">
+ <input 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">
+ <input 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">
<div class="input-append">
- <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+ <input id="appendedInputButton" size="16" type="text">
+ <button class="btn" type="button">Go!</button>
</div>
<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 id="appendedInputButtons" size="16" type="text">
+ <button class="btn" type="button">Search</button>
+ <button class="btn" type="button">Options</button>
</div>
</pre>
<h4>Search form</h4>
<form class="bs-docs-example form-search">
<div class="input-append">
- <input type="text" class="span2 search-query">
+ <input type="text" class="search-query">
<button type="submit" class="btn">Search</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">Search</button>
- <input type="text" class="span2 search-query">
+ <input type="text" class="search-query">
</div>
</form>
<pre class="prettyprint linenums">
<form class="form-search">
<div class="input-append">
- <input type="text" class="span2 search-query">
+ <input type="text" class="search-query">
<button type="submit" class="btn">Search</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">Search</button>
- <input type="text" class="span2 search-query">
+ <input type="text" class="search-query">
</div>
</form>
</pre>
@@ -1284,7 +1291,7 @@ For example, <code><section></code> should be wrapped as inlin
<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">
+ <div class="controls controls-row">
<input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index c242fef50a9759654bd31f6bde5d9cb85f457dca..74327000464d192a20902ac727e9a7b6e4985f3f 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1068,20 +1068,22 @@
<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}}">
+ <input 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">
+ <input id="appendedInput" size="16" type="text">
<span class="add-on">.00</span>
</div>
</form>
<pre class="prettyprint linenums">
<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 id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
</div>
<div class="input-append">
- <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+ <input id="appendedInput" size="16" type="text">
+ <span class="add-on">.00</span>
</div>
</pre>
@@ -1090,13 +1092,15 @@
<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">
+ <input id="appendedPrependedInput" size="16" type="text">
<span class="add-on">.00</span>
</div>
</form>
<pre class="prettyprint linenums">
<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 id="appendedPrependedInput" size="16" type="text">
+ <span class="add-on">.00</span>
</div>
</pre>
@@ -1104,46 +1108,49 @@
<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">
+ <input 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">
+ <input 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">
<div class="input-append">
- <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+ <input id="appendedInputButton" size="16" type="text">
+ <button class="btn" type="button">Go!</button>
</div>
<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 id="appendedInputButtons" size="16" type="text">
+ <button class="btn" type="button">Search</button>
+ <button class="btn" type="button">Options</button>
</div>
</pre>
<h4>{{_i}}Search form{{/i}}</h4>
<form class="bs-docs-example form-search">
<div class="input-append">
- <input type="text" class="span2 search-query">
+ <input type="text" class="search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
- <input type="text" class="span2 search-query">
+ <input type="text" class="search-query">
</div>
</form>{{! /example }}
<pre class="prettyprint linenums">
<form class="form-search">
<div class="input-append">
- <input type="text" class="span2 search-query">
+ <input type="text" class="search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
- <input type="text" class="span2 search-query">
+ <input type="text" class="search-query">
</div>
</form>
</pre>
@@ -1221,7 +1228,7 @@
<p>{{_i}}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.{{/i}}</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
- <div class="controls">
+ <div class="controls controls-row">
<input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
diff --git a/less/forms.less b/less/forms.less
index 7e9036a6a17d1310172cd0cca68af7b1467e1ba6..0e656cc1dc1dc0f5aa32463ee64bab6dfb9a8e31 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -265,42 +265,33 @@ textarea {
.input-xlarge { width: 270px; }
.input-xxlarge { width: 530px; }
+
+
+// GRID SIZING FOR INPUTS
+// ----------------------
+
// Grid style input sizes
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
-.uneditable-input[class*="span"],
-// Redeclare since the fluid row class is more specific
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"] {
- xfloat: none;
- xmargin-left: 0;
+.uneditable-input[class*="span"] {
+ float: none;
+ margin-left: 0;
+ margin-right: 0;
+}
+
+.controls-row {
+ #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
}
+
// Ensure input-prepend/append never wraps
.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend input[class*="span"],
-.input-prepend .uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"],
-.row-fluid .input-prepend [class*="span"],
-.row-fluid .input-append [class*="span"] {
+.input-prepend .uneditable-input[class*="span"] {
display: inline-block;
}
-
-
-// GRID SIZING FOR INPUTS
-// ----------------------
-
-.controls-row {
- #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
-}
-
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
@@ -427,8 +418,8 @@ select:focus:required:invalid {
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;
+ float: none; // Undo the float from grid sizing
+ margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
font-size: @baseFontSize;
vertical-align: top;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
@@ -437,6 +428,11 @@ select:focus:required:invalid {
z-index: 2;
}
}
+ input[class*="span"],
+ select[class*="span"],
+ .uneditable-input[class*="span"] {
+ margin: 0;
+ }
.add-on {
display: inline-block;
width: auto;
diff --git a/less/mixins.less b/less/mixins.less
index bfce2c9c20dbe3c1d0f0f9a68d68c4144c143b44..8bf338c29d441654a0a74bb3c0f839c92f7343ea 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -555,92 +555,86 @@
// The Grid
#grid {
- .core (@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
+ .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
- .spanX (@index) when (@index > 0) {
+ .spanX(@index) when (@index > 0) {
(~".span@{index}") { .span(@index); }
.spanX(@index - 1);
}
- .spanX (0) {}
+ .spanX(0) {}
- .offsetX (@index) when (@index > 0) {
+ .offsetX(@index) when (@index > 0) {
(~".offset@{index}") { .offset(@index); }
.offsetX(@index - 1);
}
- .offsetX (0) {}
+ .offsetX(0) {}
- .offset (@columns) {
+
+ // Base styles
+ .offset(@columns) {
margin-left: percentage(@columns / @gridColumns);
}
-
- .span (@columns) {
+ .span(@columns) {
width: percentage(@columns / @gridColumns);
}
.row {
+ // Negative indent the columns so text lines up
margin-left: @gridGutterWidth / -2;
margin-right: @gridGutterWidth / -2;
+ // Clear the floated columns
.clearfix();
}
[class*="span"] {
- float: left;
- min-height: 1px; // prevent column collapsing
+ float: left; // Collapse whitespace
+ min-height: 1px; // Prevent empty columns from collapsing
padding-left: @gridGutterWidth / 2;
padding-right: @gridGutterWidth / 2;
+ // Proper box-model (padding doesnt' add to width)
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
- // generate .spanX and .offsetX
- .spanX (@gridColumns);
- .offsetX (@gridColumns);
+ // Generate .spanX and .offsetX
+ .spanX(@gridColumns);
+ .offsetX(@gridColumns);
}
.input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
- .spanX (@index) when (@index > 0) {
- (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
+ .spanX(@index) when (@index > 0) {
+ (~"input.span@{index}, textarea.span@{index}, select.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
.spanX(@index - 1);
}
- .spanX (0) {}
-
- .span(@columns) {
- //width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth) + percentage(@gridGutterWidth/(@columns - 1));
- //width: (100% - ((@columns - 1) * (@gridGutterWidth / @gridRowWidth))) / @gridColumns;
+ .spanX(0) {}
+ .offsetX(@index) when (@index > 0) {
+ (~"input.offset@{index}, textarea.offset@{index}, select.offset@{index}, uneditable-input.offset@{index}") { .offset(@index); }
+ .offsetX(@index - 1);
+ }
+ .offsetX(0) {}
- //width: percentage((@columns * (((@columns - 1) * (@gridGutterWidth/@gridRowWidth)))) / @gridRowWidth);
- width: percentage((@columns * (@gridRowWidth - ( @columns - 1 ) * (@gridGutterWidth/@gridRowWidth)) / 12 ) / @gridRowWidth);
- //( 4 * (940 - (num_col - 1 )*(20/940)) )/940
+ .span(@columns) {
+ // Part 1: Since inputs require padding *and* margin, we subtract the grid gutter width, as a percent of the row, from the default column width.
+ width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth);
+ // Part 2: That subtracted width then gets split in half and added to the left and right margins.
margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth);
- //margin-left: percentage((((@columns - 1) * @gridGutterWidth)/ @gridRowWidth ) / (2 * (@columns - 1) );
-
margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
- //margin-right: percentage((((@columns - 1) * @gridGutterWidth)/ @gridRowWidth ) / (2 * (@columns - 1) );
}
- // 940*4/12 - 20/940 = .312056737
-
- // Space grid-sized controls properly if multiple per line
- input[class*="span"]:first-child,
- textarea[class*="span"]:first-child,
- .uneditable-input[class*="span"]:first-child {
- margin-left: 0;
- }
- input[class*="span"]:last-child,
- textarea[class*="span"]:last-child,
- .uneditable-input[class*="span"]:last-child {
- margin-right: 0;
+ .offset(@columns) {
+ // Take the normal offset margin and add an extra gutter's worth.
+ margin-left: percentage(@columns / @gridColumns) + percentage((@gridGutterWidth / 2) / @gridRowWidth);
}
-
- // generate .spanX
- .spanX (@gridColumns);
+ // Generate .spanX and .offsetX
+ .spanX(@gridColumns);
+ .offsetX(@gridColumns);
}
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index c0cb1485e983f4cb524d89b17af10e999e9def88..ca9dd3ea31813825948e0b254db58d09d9f82811 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -53,12 +53,119 @@
</header>
-<div class="bs-docs-canvas">
<div class="container">
+
+
+<div class="bs-docs-grid">
+ <div class="row show-grid">
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span4">4</div>
+ <div class="span4">4</div>
+ <div class="span4">4</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span6">6</div>
+ <div class="span6">6</div>
+ </div>
+ <div class="row show-grid">
+ <div class="span12">12</div>
+ </div>
+</div>
+
+<form class="controls-row">
+ <input class="span1" type="text" placeholder=".span1">
+ <input class="span1" type="text" placeholder=".span1">
+ <input class="span1" type="text" placeholder=".span1">
+ <input class="span1" type="text" placeholder=".span1">
+ <input class="span1" type="text" placeholder=".span1">
+ <input class="span1" type="text" placeholder=".span1">
+ <input class="span1" type="text" placeholder=".span1">
+ <input class="span1" type="text" placeholder=".span1">
+ <input class="span1" type="text" placeholder=".span1">
+ <input class="span1" type="text" placeholder=".span1">
+ <input class="span1" type="text" placeholder=".span1">
+ <input class="span1" type="text" placeholder=".span1">
+</form>
+
+<form class="controls-row">
+ <input class="span4" type="text" placeholder=".span4">
+ <input class="span4" type="text" placeholder=".span4">
+ <input class="span4" type="text" placeholder=".span4">
+</form>
+
+<form class="controls-row">
+ <input class="span6" type="text" placeholder=".span6">
+ <input class="span6" type="text" placeholder=".span6">
+</form>
+
+<form class="controls-row">
+ <input class="span12" type="text" placeholder=".span12">
+</form>
+
+<form class="clearfix">
+ <input class="span4" type="text" placeholder=".span4">
+ <input class="span4 offset4" type="text" placeholder=".span4">
+</form>
+
+
+<form class="bs-docs-example form-horizontal">
+ <legend>Horizontal form example</legend>
+ <div class="control-group">
+ <label class="control-label">Name</label>
+ <div class="controls">
+ <input type="text" class="span3" placeholder="First">
+ <input type="text" class="span3" placeholder="Last">
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label">Email</label>
+ <div class="controls">
+ <input type="text" class="span6" placeholder="First">
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label">Password</label>
+ <div class="controls">
+ <input type="password" class="span6" placeholder="Password">
+ </div>
+ </div>
+ <div class="control-group">
+ <div class="controls">
+ <label class="checkbox">
+ <input type="checkbox"> Remember me
+ </label>
+ <button type="submit" class="btn">Sign in</button>
+ </div>
+ </div>
+</form>
+
+<style>
+.container { background-color: rgba(255,0,0,.1); }
+</style>
+
+
+<br><br><br>
+
+
+
+
<!-- Typography
================================================== -->
@@ -136,239 +243,6 @@
-<!-- Fluid grid
-================================================== -->
-
-<div class="page-header">
- <h1>Fluid grids</h1>
-</div>
-
-<div class="fluid-grid">
- <div class="row">
- <div class="span12">12
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="span11">11
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- <div class="span1">1
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="span10">10
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- <div class="span2">2
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="span9">9
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- <div class="span3">3
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="span8">8
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- <div class="span4">4
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="span7">7
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- <div class="span5">5
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="span6">6
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- <div class="span6">6
- <div class="row-fluid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- </div>
- </div>
-</div> <!-- fluid grids -->
-
-
<!-- Tables
================================================== -->
@@ -1268,7 +1142,6 @@
</div>
</footer>
-</div>
<!-- Le javascript