more tests and experiments

docs/assets/css/bootstrap-responsive.css

@@ -205,84 +205,84 @@
   input.span12,
   textarea.span12,
   .uneditable-input.span12 {
-    width: 97.43589743589743%;
+    width: 99.97589305281613%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span11,
   textarea.span11,
   .uneditable-input.span11 {
-    width: 89.10256410256409%;
+    width: 91.64657754401344%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span10,
   textarea.span10,
   .uneditable-input.span10 {
-    width: 80.76923076923077%;
+    width: 83.31689677843524%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span9,
   textarea.span9,
   .uneditable-input.span9 {
-    width: 72.43589743589743%;
+    width: 74.98685075608152%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span8,
   textarea.span8,
   .uneditable-input.span8 {
-    width: 64.10256410256409%;
+    width: 66.6564394769523%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span7,
   textarea.span7,
   .uneditable-input.span7 {
-    width: 55.769230769230774%;
+    width: 58.325662941047554%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span6,
   textarea.span6,
   .uneditable-input.span6 {
-    width: 47.43589743589744%;
+    width: 49.994521148367305%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span5,
   textarea.span5,
   .uneditable-input.span5 {
-    width: 39.10256410256411%;
+    width: 41.663014098911525%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span4,
   textarea.span4,
   .uneditable-input.span4 {
-    width: 30.769230769230766%;
+    width: 33.33114179268025%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span3,
   textarea.span3,
   .uneditable-input.span3 {
-    width: 22.435897435897438%;
+    width: 24.998904229673464%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span2,
   textarea.span2,
   .uneditable-input.span2 {
-    width: 14.1025641025641%;
+    width: 16.66630140989115%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span1,
   textarea.span1,
   .uneditable-input.span1 {
-    width: 5.769230769230768%;
+    width: 8.333333333333332%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }

docs/assets/css/bootstrap.css

@@ -1012,7 +1012,7 @@ textarea[class*="span"],
 .controls-row input.span12,
 textarea.span12,
 .uneditable-input.span12 {
-  width: 97.87234042553192%;
+  width: 99.97510185604347%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
@@ -1020,7 +1020,7 @@ textarea.span12,
 .controls-row input.span11,
 textarea.span11,
 .uneditable-input.span11 {
-  width: 89.53900709219857%;
+  width: 91.64591821336955%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
@@ -1028,7 +1028,7 @@ textarea.span11,
 .controls-row input.span10,
 textarea.span10,
 .uneditable-input.span10 {
-  width: 81.20567375886526%;
+  width: 83.31635732609024%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
@@ -1036,7 +1036,7 @@ textarea.span10,
 .controls-row input.span9,
 textarea.span9,
 .uneditable-input.span9 {
-  width: 72.87234042553192%;
+  width: 74.98641919420552%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
@@ -1044,7 +1044,7 @@ textarea.span9,
 .controls-row input.span8,
 textarea.span8,
 .uneditable-input.span8 {
-  width: 64.53900709219857%;
+  width: 66.6561038177154%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
@@ -1052,7 +1052,7 @@ textarea.span8,
 .controls-row input.span7,
 textarea.span7,
 .uneditable-input.span7 {
-  width: 56.20567375886525%;
+  width: 58.32541119661988%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
@@ -1060,7 +1060,7 @@ textarea.span7,
 .controls-row input.span6,
 textarea.span6,
 .uneditable-input.span6 {
-  width: 47.87234042553192%;
+  width: 49.99434133091897%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
@@ -1068,7 +1068,7 @@ textarea.span6,
 .controls-row input.span5,
 textarea.span5,
 .uneditable-input.span5 {
-  width: 39.53900709219859%;
+  width: 41.66289422061264%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
@@ -1076,7 +1076,7 @@ textarea.span5,
 .controls-row input.span4,
 textarea.span4,
 .uneditable-input.span4 {
-  width: 31.205673758865245%;
+  width: 33.33106986570092%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
@@ -1084,7 +1084,7 @@ textarea.span4,
 .controls-row input.span3,
 textarea.span3,
 .uneditable-input.span3 {
-  width: 22.872340425531917%;
+  width: 24.998868266183795%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
@@ -1092,7 +1092,7 @@ textarea.span3,
 .controls-row input.span2,
 textarea.span2,
 .uneditable-input.span2 {
-  width: 14.53900709219858%;
+  width: 16.666289422061265%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
@@ -1100,7 +1100,7 @@ textarea.span2,
 .controls-row input.span1,
 textarea.span1,
 .uneditable-input.span1 {
-  width: 6.205673758865247%;
+  width: 8.333333333333332%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }

less/mixins.less

@@ -609,11 +609,23 @@
     .spanX (0) {}
 
     .span(@columns) {
-      width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth);
+      //width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth) + percentage(@gridGutterWidth/(@columns - 1));
+      //width: (100% - ((@columns - 1) * (@gridGutterWidth / @gridRowWidth))) / @gridColumns;
+
+
+      //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
+
       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,

less/tests/grid.html

@@ -17,7 +17,9 @@
         padding-bottom: 30px;
       }
 
-
+      .container {
+        background-color: rgba(255,0,0,.1);
+      }
     </style>
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
@@ -75,7 +77,7 @@
 
 
       <h2>Inputs</h2>
-      <input type="text" class="span1" placeholder=".span1">
+<!--       <input type="text" class="span1" placeholder=".span1">
       <input type="text" class="span2" placeholder=".span2">
       <input type="text" class="span4" placeholder=".span4">
       <input type="text" class="span5" placeholder=".span5">
@@ -93,6 +95,12 @@
         <input type="text" class="span4" placeholder=".span4">
         <input type="text" class="span5" placeholder=".span5">
       </div>
+ -->
+      <div class="controls-row">
+        <input type="text" class="span4" placeholder=".span4">
+        <input type="text" class="span4" placeholder=".span4">
+        <input type="text" class="span4" placeholder=".span4">
+      </div>
 
     </form> <!-- /container -->