From: Mark Otto <markotto@twitter.com>
Date: Wed, 26 Sep 2012 05:00:41 +0000 (-0700)
Subject: Merge branch '2.1.2-wip' into box-sizing-exercise
X-Git-Tag: v3.0.0-rc1~945
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=ce19e63d5b068ba0698dee4e2d99c725f6799b0d;p=thirdparty%2Fbootstrap.git

Merge branch '2.1.2-wip' into box-sizing-exercise

Conflicts:
	docs/assets/css/bootstrap-responsive.css
	docs/assets/css/bootstrap.css
	docs/base-css.html
	docs/templates/pages/base-css.mustache
	less/forms.less
	less/mixins.less
---

ce19e63d5b068ba0698dee4e2d99c725f6799b0d
diff --cc docs/assets/css/bootstrap.css
index 49c45ca489,4e533b2523..4ab043d0b5
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@@ -1447,13 -1580,12 +1476,13 @@@ 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;
-      -moz-border-radius: 0 3px 3px 0;
-           border-radius: 0 3px 3px 0;
+   -webkit-border-radius: 0 4px 4px 0;
+      -moz-border-radius: 0 4px 4px 0;
+           border-radius: 0 4px 4px 0;
  }
  
  .input-append input:focus,
diff --cc docs/base-css.html
index 8a18ab9a3a,d3a92c8312..a2ecf613a4
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@@ -1131,21 -1131,21 +1131,21 @@@ For example, &lt;code&gt;&lt;section&gt
            <form class="bs-docs-example">
              <div class="input-prepend">
                <span class="add-on">@</span>
-               <input id="prependedInput" size="16" type="text" placeholder="Username">
 -              <input class="span2" id="prependedInput" type="text" placeholder="Username">
++              <input id="prependedInput" type="text" placeholder="Username">
              </div>
              <br>
              <div class="input-append">
-               <input id="appendedInput" size="16" type="text">
 -              <input class="span2" id="appendedInput" type="text">
++              <input id="appendedInput" type="text">
                <span class="add-on">.00</span>
              </div>
            </form>
  <pre class="prettyprint linenums">
  &lt;div class="input-prepend"&gt;
    &lt;span class="add-on"&gt;@&lt;/span&gt;
-   &lt;input id="prependedInput" size="16" type="text" placeholder="Username"&gt;
 -  &lt;input class="span2" id="prependedInput" type="text" placeholder="Username"&gt;
++  &lt;input id="prependedInput" type="text" placeholder="Username"&gt;
  &lt;/div&gt;
  &lt;div class="input-append"&gt;
-   &lt;input id="appendedInput" size="16" type="text"&gt;
 -  &lt;input class="span2" id="appendedInput" type="text"&gt;
++  &lt;input id="appendedInput" type="text"&gt;
    &lt;span class="add-on"&gt;.00&lt;/span&gt;
  &lt;/div&gt;
  </pre>
@@@ -1155,14 -1155,14 +1155,14 @@@
            <form class="bs-docs-example form-inline">
              <div class="input-prepend input-append">
                <span class="add-on">$</span>
-               <input id="appendedPrependedInput" size="16" type="text">
 -              <input class="span2" id="appendedPrependedInput" type="text">
++              <input id="appendedPrependedInput" type="text">
                <span class="add-on">.00</span>
              </div>
            </form>
  <pre class="prettyprint linenums">
  &lt;div class="input-prepend input-append"&gt;
    &lt;span class="add-on"&gt;$&lt;/span&gt;
-   &lt;input id="appendedPrependedInput" size="16" type="text"&gt;
 -  &lt;input class="span2" id="appendedPrependedInput" type="text"&gt;
++  &lt;input id="appendedPrependedInput" type="text"&gt;
    &lt;span class="add-on"&gt;.00&lt;/span&gt;
  &lt;/div&gt;
  </pre>
@@@ -1171,26 -1171,139 +1171,140 @@@
            <p>Instead of a <code>&lt;span&gt;</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 id="appendedInputButton" size="16" type="text">
 -              <input class="span2" id="appendedInputButton" type="text">
++              <input id="appendedInputButton" type="text">
                <button class="btn" type="button">Go!</button>
              </div>
-             <br>
+           </form>
+ <pre class="prettyprint linenums">
+ &lt;div class="input-append"&gt;
+   &lt;input class="span2" id="appendedInputButton" type="text"&gt;
+   &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+ &lt;/div&gt;
+ </pre>
+           <form class="bs-docs-example">
              <div class="input-append">
-               <input id="appendedInputButtons" size="16" type="text">
 -              <input class="span2" id="appendedInputButtons" type="text">
++              <input id="appendedInputButtons" type="text">
                <button class="btn" type="button">Search</button>
                <button class="btn" type="button">Options</button>
              </div>
            </form>
  <pre class="prettyprint linenums">
  &lt;div class="input-append"&gt;
-   &lt;input id="appendedInputButton" size="16" type="text"&gt;
-   &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
 -  &lt;input class="span2" id="appendedInputButtons" type="text"&gt;
++  &lt;input id="appendedInputButton" type="text"&gt;
+   &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
+   &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
  &lt;/div&gt;
+ </pre>
  
+           <h4>Button dropdowns</h4>
+           <p></p>
+           <form class="bs-docs-example">
+             <div class="input-append">
+               <input class="span2" id="appendedDropdownButton" type="text">
+               <div class="btn-group">
+                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+                 <ul class="dropdown-menu">
+                   <li><a href="#">Action</a></li>
+                   <li><a href="#">Another action</a></li>
+                   <li><a href="#">Something else here</a></li>
+                   <li class="divider"></li>
+                   <li><a href="#">Separated link</a></li>
+                 </ul>
+               </div><!-- /btn-group -->
+             </div><!-- /input-append -->
+           </form>
+ <pre class="prettyprint linenums">
  &lt;div class="input-append"&gt;
-   &lt;input id="appendedInputButtons" size="16" type="text"&gt;
-   &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
-   &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
++  &lt;input id="appendedInputButtons" type="text"&gt;
+   &lt;input class="span2" id="appendedDropdownButton" type="text"&gt;
+   &lt;div class="btn-group"&gt;
+     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+       Action
+       &lt;span class="caret"&gt;&lt;/span&gt;
+     &lt;/button&gt;
+     &lt;ul class="dropdown-menu"&gt;
+       ...
+     &lt;/ul&gt;
+   &lt;/div&gt;
+ &lt;/div&gt;
+ </pre>
+ 
+           <form class="bs-docs-example">
+             <div class="input-prepend">
+               <div class="btn-group">
+                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+                 <ul class="dropdown-menu">
+                   <li><a href="#">Action</a></li>
+                   <li><a href="#">Another action</a></li>
+                   <li><a href="#">Something else here</a></li>
+                   <li class="divider"></li>
+                   <li><a href="#">Separated link</a></li>
+                 </ul>
+               </div><!-- /btn-group -->
+               <input class="span2" id="prependedDropdownButton" type="text">
+             </div><!-- /input-prepend -->
+           </form>
+ <pre class="prettyprint linenums">
+ &lt;div class="input-prepend"&gt;
+   &lt;div class="btn-group"&gt;
+     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+       Action
+       &lt;span class="caret"&gt;&lt;/span&gt;
+     &lt;/button&gt;
+     &lt;ul class="dropdown-menu"&gt;
+       ...
+     &lt;/ul&gt;
+   &lt;/div&gt;
+   &lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
+ &lt;/div&gt;
+ </pre>
+ 
+           <form class="bs-docs-example">
+             <div class="input-prepend input-append">
+               <div class="btn-group">
+                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+                 <ul class="dropdown-menu">
+                   <li><a href="#">Action</a></li>
+                   <li><a href="#">Another action</a></li>
+                   <li><a href="#">Something else here</a></li>
+                   <li class="divider"></li>
+                   <li><a href="#">Separated link</a></li>
+                 </ul>
+               </div><!-- /btn-group -->
+               <input class="span2" id="appendedPrependedDropdownButton" type="text">
+               <div class="btn-group">
+                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+                 <ul class="dropdown-menu">
+                   <li><a href="#">Action</a></li>
+                   <li><a href="#">Another action</a></li>
+                   <li><a href="#">Something else here</a></li>
+                   <li class="divider"></li>
+                   <li><a href="#">Separated link</a></li>
+                 </ul>
+               </div><!-- /btn-group -->
+             </div><!-- /input-prepend input-append -->
+           </form>
+ <pre class="prettyprint linenums">
+ &lt;div class="input-prepend input-append"&gt;
+   &lt;div class="btn-group"&gt;
+     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+       Action
+       &lt;span class="caret"&gt;&lt;/span&gt;
+     &lt;/button&gt;
+     &lt;ul class="dropdown-menu"&gt;
+       ...
+     &lt;/ul&gt;
+   &lt;/div&gt;
+   &lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
+   &lt;div class="btn-group"&gt;
+     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+       Action
+       &lt;span class="caret"&gt;&lt;/span&gt;
+     &lt;/button&gt;
+     &lt;ul class="dropdown-menu"&gt;
+       ...
+     &lt;/ul&gt;
+   &lt;/div&gt;
  &lt;/div&gt;
  </pre>
  
diff --cc docs/templates/pages/base-css.mustache
index 7432700046,289bbaaca0..82d65999d6
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@@ -1068,21 -1068,21 +1068,21 @@@
            <form class="bs-docs-example">
              <div class="input-prepend">
                <span class="add-on">@</span>
-               <input id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
 -              <input class="span2" id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}">
++              <input id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}">
              </div>
              <br>
              <div class="input-append">
-               <input id="appendedInput" size="16" type="text">
 -              <input class="span2" id="appendedInput" type="text">
++              <input id="appendedInput" type="text">
                <span class="add-on">.00</span>
              </div>
            </form>
  <pre class="prettyprint linenums">
  &lt;div class="input-prepend"&gt;
    &lt;span class="add-on"&gt;@&lt;/span&gt;
-   &lt;input id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}"&gt;
 -  &lt;input class="span2" id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}"&gt;
++  &lt;input id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}"&gt;
  &lt;/div&gt;
  &lt;div class="input-append"&gt;
-   &lt;input id="appendedInput" size="16" type="text"&gt;
 -  &lt;input class="span2" id="appendedInput" type="text"&gt;
++  &lt;input id="appendedInput" type="text"&gt;
    &lt;span class="add-on"&gt;.00&lt;/span&gt;
  &lt;/div&gt;
  </pre>
@@@ -1092,14 -1092,14 +1092,14 @@@
            <form class="bs-docs-example form-inline">
              <div class="input-prepend input-append">
                <span class="add-on">$</span>
-               <input id="appendedPrependedInput" size="16" type="text">
 -              <input class="span2" id="appendedPrependedInput" type="text">
++              <input id="appendedPrependedInput" type="text">
                <span class="add-on">.00</span>
              </div>
            </form>
  <pre class="prettyprint linenums">
  &lt;div class="input-prepend input-append"&gt;
    &lt;span class="add-on"&gt;$&lt;/span&gt;
-   &lt;input id="appendedPrependedInput" size="16" type="text"&gt;
 -  &lt;input class="span2" id="appendedPrependedInput" type="text"&gt;
++  &lt;input id="appendedPrependedInput" type="text"&gt;
    &lt;span class="add-on"&gt;.00&lt;/span&gt;
  &lt;/div&gt;
  </pre>
@@@ -1108,26 -1108,139 +1108,140 @@@
            <p>{{_i}}Instead of a <code>&lt;span&gt;</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 id="appendedInputButton" size="16" type="text">
 -              <input class="span2" id="appendedInputButton" type="text">
++              <input id="appendedInputButton" type="text">
                <button class="btn" type="button">Go!</button>
              </div>
-             <br>
+           </form>
+ <pre class="prettyprint linenums">
+ &lt;div class="input-append"&gt;
+   &lt;input class="span2" id="appendedInputButton" type="text"&gt;
+   &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+ &lt;/div&gt;
+ </pre>
+           <form class="bs-docs-example">
              <div class="input-append">
-               <input id="appendedInputButtons" size="16" type="text">
 -              <input class="span2" id="appendedInputButtons" type="text">
++              <input id="appendedInputButtons" type="text">
                <button class="btn" type="button">Search</button>
                <button class="btn" type="button">Options</button>
              </div>
            </form>
  <pre class="prettyprint linenums">
  &lt;div class="input-append"&gt;
-   &lt;input id="appendedInputButton" size="16" type="text"&gt;
-   &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
 -  &lt;input class="span2" id="appendedInputButtons" type="text"&gt;
++  &lt;input id="appendedInputButton" type="text"&gt;
+   &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
+   &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
  &lt;/div&gt;
+ </pre>
  
+           <h4>{{_i}}Button dropdowns{{/i}}</h4>
+           <p>{{_i}}{{/i}}</p>
+           <form class="bs-docs-example">
+             <div class="input-append">
+               <input class="span2" id="appendedDropdownButton" type="text">
+               <div class="btn-group">
+                 <button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
+                 <ul class="dropdown-menu">
+                   <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                   <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                   <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                   <li class="divider"></li>
+                   <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                 </ul>
+               </div><!-- /btn-group -->
+             </div><!-- /input-append -->
+           </form>
+ <pre class="prettyprint linenums">
  &lt;div class="input-append"&gt;
-   &lt;input id="appendedInputButtons" size="16" type="text"&gt;
-   &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
-   &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
++  &lt;input id="appendedInputButtons" type="text"&gt;
+   &lt;input class="span2" id="appendedDropdownButton" type="text"&gt;
+   &lt;div class="btn-group"&gt;
+     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+       {{_i}}Action{{/i}}
+       &lt;span class="caret"&gt;&lt;/span&gt;
+     &lt;/button&gt;
+     &lt;ul class="dropdown-menu"&gt;
+       ...
+     &lt;/ul&gt;
+   &lt;/div&gt;
+ &lt;/div&gt;
+ </pre>
+ 
+           <form class="bs-docs-example">
+             <div class="input-prepend">
+               <div class="btn-group">
+                 <button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
+                 <ul class="dropdown-menu">
+                   <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                   <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                   <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                   <li class="divider"></li>
+                   <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                 </ul>
+               </div><!-- /btn-group -->
+               <input class="span2" id="prependedDropdownButton" type="text">
+             </div><!-- /input-prepend -->
+           </form>
+ <pre class="prettyprint linenums">
+ &lt;div class="input-prepend"&gt;
+   &lt;div class="btn-group"&gt;
+     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+       {{_i}}Action{{/i}}
+       &lt;span class="caret"&gt;&lt;/span&gt;
+     &lt;/button&gt;
+     &lt;ul class="dropdown-menu"&gt;
+       ...
+     &lt;/ul&gt;
+   &lt;/div&gt;
+   &lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
+ &lt;/div&gt;
+ </pre>
+ 
+           <form class="bs-docs-example">
+             <div class="input-prepend input-append">
+               <div class="btn-group">
+                 <button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
+                 <ul class="dropdown-menu">
+                   <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                   <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                   <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                   <li class="divider"></li>
+                   <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                 </ul>
+               </div><!-- /btn-group -->
+               <input class="span2" id="appendedPrependedDropdownButton" type="text">
+               <div class="btn-group">
+                 <button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
+                 <ul class="dropdown-menu">
+                   <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                   <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                   <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                   <li class="divider"></li>
+                   <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                 </ul>
+               </div><!-- /btn-group -->
+             </div><!-- /input-prepend input-append -->
+           </form>
+ <pre class="prettyprint linenums">
+ &lt;div class="input-prepend input-append"&gt;
+   &lt;div class="btn-group"&gt;
+     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+       {{_i}}Action{{/i}}
+       &lt;span class="caret"&gt;&lt;/span&gt;
+     &lt;/button&gt;
+     &lt;ul class="dropdown-menu"&gt;
+       ...
+     &lt;/ul&gt;
+   &lt;/div&gt;
+   &lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
+   &lt;div class="btn-group"&gt;
+     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
+       {{_i}}Action{{/i}}
+       &lt;span class="caret"&gt;&lt;/span&gt;
+     &lt;/button&gt;
+     &lt;ul class="dropdown-menu"&gt;
+       ...
+     &lt;/ul&gt;
+   &lt;/div&gt;
  &lt;/div&gt;
  </pre>
  
diff --cc less/mixins.less
index 8bf338c29d,1466696bc2..03ed7239e1
--- a/less/mixins.less
+++ b/less/mixins.less
@@@ -603,38 -599,86 +602,37 @@@
  
    }
  
 -  .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
  
 -    .spanX (@index) when (@index > 0) {
 -      (~".span@{index}") { .span(@index); }
 +  .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
 +
 +    .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) {}
 +    .spanX(0) {}
  
 -    .offsetX (@index) when (@index > 0) {
 -      (~'.offset@{index}') { .offset(@index); }
 -      (~'.offset@{index}:first-child') { .offsetFirstChild(@index); }
 +    .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) {}
 -
 -    .offset (@columns) {
 -      margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
 -  	  *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
 -    }
 -
 -    .offsetFirstChild (@columns) {
 -      margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
 -      *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
 -    }
 -
 -    .span (@columns) {
 -      width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
 -      *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
 -    }
 -
 -    .row-fluid {
 -      width: 100%;
 -      .clearfix();
 -      [class*="span"] {
 -        .input-block-level();
 -        float: left;
 -        margin-left: @fluidGridGutterWidth;
 -        *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
 -      }
 -      [class*="span"]:first-child {
 -        margin-left: 0;
 -      }
 -
 -      // Space grid-sized controls properly if multiple per line
 -      .controls-row [class*="span"] + [class*="span"] {
 -        margin-left: @fluidGridGutterWidth;
 -      }
 -
 -      // generate .spanX and .offsetX
 -      .spanX (@gridColumns);
 -      .offsetX (@gridColumns);
 -    }
 -
 -  }
 -
 -  .input(@gridColumnWidth, @gridGutterWidth) {
 -
 -    .spanX (@index) when (@index > 0) {
 -      (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
 -      .spanX(@index - 1);
 -    }
 -    .spanX (0) {}
 +    .offsetX(0) {}
  
- 
      .span(@columns) {
 -      width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
 +      // 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-right: percentage((@gridGutterWidth / 2) / @gridRowWidth);
      }
  
 -    input,
 -    textarea,
 -    .uneditable-input {
 -      margin-left: 0; // override margin-left from core grid system
 +    .offset(@columns) {
 +      // Take the normal offset margin and add an extra gutter's worth.
 +      margin-left: percentage(@columns / @gridColumns) + percentage((@gridGutterWidth / 2) / @gridRowWidth);
      }
  
 -    // Space grid-sized controls properly if multiple per line
 -    .controls-row [class*="span"] + [class*="span"] {
 -      margin-left: @gridGutterWidth;
 -    }
 -
 -    // generate .spanX
 -    .spanX (@gridColumns);
 +    // Generate .spanX and .offsetX
 +    .spanX(@gridColumns);
 +    .offsetX(@gridColumns);
  
    }