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%;
}
.controls-row input.span12,
textarea.span12,
.uneditable-input.span12 {
- width: 97.87234042553192%;
+ width: 99.97510185604347%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span11,
textarea.span11,
.uneditable-input.span11 {
- width: 89.53900709219857%;
+ width: 91.64591821336955%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span10,
textarea.span10,
.uneditable-input.span10 {
- width: 81.20567375886526%;
+ width: 83.31635732609024%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span9,
textarea.span9,
.uneditable-input.span9 {
- width: 72.87234042553192%;
+ width: 74.98641919420552%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span8,
textarea.span8,
.uneditable-input.span8 {
- width: 64.53900709219857%;
+ width: 66.6561038177154%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span7,
textarea.span7,
.uneditable-input.span7 {
- width: 56.20567375886525%;
+ width: 58.32541119661988%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span6,
textarea.span6,
.uneditable-input.span6 {
- width: 47.87234042553192%;
+ width: 49.99434133091897%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span5,
textarea.span5,
.uneditable-input.span5 {
- width: 39.53900709219859%;
+ width: 41.66289422061264%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span4,
textarea.span4,
.uneditable-input.span4 {
- width: 31.205673758865245%;
+ width: 33.33106986570092%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span3,
textarea.span3,
.uneditable-input.span3 {
- width: 22.872340425531917%;
+ width: 24.998868266183795%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span2,
textarea.span2,
.uneditable-input.span2 {
- width: 14.53900709219858%;
+ width: 16.666289422061265%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.controls-row input.span1,
textarea.span1,
.uneditable-input.span1 {
- width: 6.205673758865247%;
+ width: 8.333333333333332%;
margin-right: 1.0638297872340425%;
margin-left: 1.0638297872340425%;
}
.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,
padding-bottom: 30px;
}
-
+ .container {
+ background-color: rgba(255,0,0,.1);
+ }
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<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">
<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 -->