clear: both;
}
.row-fluid [class*="span"] {
+ display: block;
+ width: 100%;
+ min-height: 28px;
+ /* Make inputs at least the height of their button counterpart */
+
+ /* Makes inputs behave like true block-level elements */
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
float: left;
margin-left: 2.762430939%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
- .row-fluid > .span12 {
+ .row-fluid .span12 {
width: 99.999999993%;
}
- .row-fluid > .span11 {
+ .row-fluid .span11 {
width: 91.436464082%;
}
- .row-fluid > .span10 {
+ .row-fluid .span10 {
width: 82.87292817100001%;
}
- .row-fluid > .span9 {
+ .row-fluid .span9 {
width: 74.30939226%;
}
- .row-fluid > .span8 {
+ .row-fluid .span8 {
width: 65.74585634900001%;
}
- .row-fluid > .span7 {
+ .row-fluid .span7 {
width: 57.182320438000005%;
}
- .row-fluid > .span6 {
+ .row-fluid .span6 {
width: 48.618784527%;
}
- .row-fluid > .span5 {
+ .row-fluid .span5 {
width: 40.055248616%;
}
- .row-fluid > .span4 {
+ .row-fluid .span4 {
width: 31.491712705%;
}
- .row-fluid > .span3 {
+ .row-fluid .span3 {
width: 22.928176794%;
}
- .row-fluid > .span2 {
+ .row-fluid .span2 {
width: 14.364640883%;
}
- .row-fluid > .span1 {
+ .row-fluid .span1 {
width: 5.801104972%;
}
input,
clear: both;
}
.row-fluid [class*="span"] {
+ display: block;
+ width: 100%;
+ min-height: 28px;
+ /* Make inputs at least the height of their button counterpart */
+
+ /* Makes inputs behave like true block-level elements */
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
float: left;
margin-left: 2.564102564%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
- .row-fluid > .span12 {
+ .row-fluid .span12 {
width: 100%;
}
- .row-fluid > .span11 {
+ .row-fluid .span11 {
width: 91.45299145300001%;
}
- .row-fluid > .span10 {
+ .row-fluid .span10 {
width: 82.905982906%;
}
- .row-fluid > .span9 {
+ .row-fluid .span9 {
width: 74.358974359%;
}
- .row-fluid > .span8 {
+ .row-fluid .span8 {
width: 65.81196581200001%;
}
- .row-fluid > .span7 {
+ .row-fluid .span7 {
width: 57.264957265%;
}
- .row-fluid > .span6 {
+ .row-fluid .span6 {
width: 48.717948718%;
}
- .row-fluid > .span5 {
+ .row-fluid .span5 {
width: 40.170940171000005%;
}
- .row-fluid > .span4 {
+ .row-fluid .span4 {
width: 31.623931624%;
}
- .row-fluid > .span3 {
+ .row-fluid .span3 {
width: 23.076923077%;
}
- .row-fluid > .span2 {
+ .row-fluid .span2 {
width: 14.529914530000001%;
}
- .row-fluid > .span1 {
+ .row-fluid .span1 {
width: 5.982905983%;
}
input,
clear: both;
}
.row-fluid [class*="span"] {
+ display: block;
+ width: 100%;
+ min-height: 28px;
+ /* Make inputs at least the height of their button counterpart */
+
+ /* Makes inputs behave like true block-level elements */
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
float: left;
margin-left: 2.127659574%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
-.row-fluid > .span12 {
+.row-fluid .span12 {
width: 99.99999998999999%;
}
-.row-fluid > .span11 {
+.row-fluid .span11 {
width: 91.489361693%;
}
-.row-fluid > .span10 {
+.row-fluid .span10 {
width: 82.97872339599999%;
}
-.row-fluid > .span9 {
+.row-fluid .span9 {
width: 74.468085099%;
}
-.row-fluid > .span8 {
+.row-fluid .span8 {
width: 65.95744680199999%;
}
-.row-fluid > .span7 {
+.row-fluid .span7 {
width: 57.446808505%;
}
-.row-fluid > .span6 {
+.row-fluid .span6 {
width: 48.93617020799999%;
}
-.row-fluid > .span5 {
+.row-fluid .span5 {
width: 40.425531911%;
}
-.row-fluid > .span4 {
+.row-fluid .span4 {
width: 31.914893614%;
}
-.row-fluid > .span3 {
+.row-fluid .span3 {
width: 23.404255317%;
}
-.row-fluid > .span2 {
+.row-fluid .span2 {
width: 14.89361702%;
}
-.row-fluid > .span1 {
+.row-fluid .span1 {
width: 6.382978723%;
}
.container {
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.spanX (@index) when (@index > 0) {
- (~"> .span@{index}") { .span(@index); }
+ (~".span@{index}") { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
width: 100%;
.clearfix();
[class*="span"] {
+ .input-block-level();
float: left;
margin-left: @fluidGridGutterWidth;
}
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
+
// Responsive.less
// For phone and tablet devices
// -------------------------------------------------------------
<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
<div id="fluidRowInputs">
<div class="row-fluid">
- <div class="span4">
+ <div class="span12">
+ <input class="span1" placeholder="span1">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row-fluid">
+ <div class="span12">
+ <input class="span2" placeholder="span2">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row-fluid">
+ <div class="span12">
+ <input class="span3" placeholder="span3">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row-fluid">
+ <div class="span12">
<input class="span4" placeholder="span4">
</div><!--/span-->
- <div class="span8">
+ </div><!--/row-->
+ <div class="row-fluid">
+ <div class="span12">
+ <input class="span5" placeholder="span5">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row-fluid">
+ <div class="span12">
+ <input class="span6" placeholder="span6">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row-fluid">
+ <div class="span12">
+ <input class="span7" placeholder="span7">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row-fluid">
+ <div class="span12">
<input class="span8" placeholder="span8">
</div><!--/span-->
</div><!--/row-->
- <div class="row-fluid" id="fluidRowInputs">
+ <div class="row-fluid">
+ <div class="span12">
+ <input class="span9" placeholder="span9">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row-fluid">
+ <div class="span12">
+ <input class="span10" placeholder="span10">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row-fluid">
+ <div class="span12">
+ <input class="span11" placeholder="span11">
+ </div><!--/span-->
+ </div><!--/row-->
+ <div class="row-fluid">
<div class="span12">
<input class="span12" placeholder="span12">
</div><!--/span-->