From 0b122bc5c526724992036a8e286079188ade3b10 Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Tue, 28 Aug 2012 13:33:06 -0700
Subject: [PATCH] remake the box-size grid, nuke fluid grid docs, fix up
examples, clean up form styles
---
docs/assets/css/bootstrap-responsive.css | 612 +++-------------------
docs/assets/css/bootstrap.css | 369 ++-----------
docs/scaffolding.html | 133 +----
docs/templates/pages/scaffolding.mustache | 133 +----
less/forms.less | 9 +-
less/grid.less | 10 +-
less/mixins.less | 101 +---
less/responsive-1200px-min.less | 18 +-
less/responsive-768px-979px.less | 10 +-
less/variables.less | 14 -
10 files changed, 174 insertions(+), 1235 deletions(-)
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index fcc4967600..9b8a2e41e9 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -92,8 +92,14 @@
}
@media (min-width: 1200px) {
+ .container,
+ .navbar-fixed-top .container,
+ .navbar-fixed-bottom .container {
+ width: 1170px;
+ }
.row {
- margin-left: -30px;
+ margin-right: -15px;
+ margin-left: -15px;
*zoom: 1;
}
.row:before,
@@ -108,324 +114,83 @@
[class*="span"] {
float: left;
min-height: 1px;
- margin-left: 30px;
- }
- .container,
- .navbar-static-top .container,
- .navbar-fixed-top .container,
- .navbar-fixed-bottom .container {
- width: 1170px;
+ padding-right: 15px;
+ padding-left: 15px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.span12 {
- width: 1170px;
+ width: 100%;
}
.span11 {
- width: 1070px;
+ width: 91.66666666666666%;
}
.span10 {
- width: 970px;
+ width: 83.33333333333334%;
}
.span9 {
- width: 870px;
+ width: 75%;
}
.span8 {
- width: 770px;
+ width: 66.66666666666666%;
}
.span7 {
- width: 670px;
+ width: 58.333333333333336%;
}
.span6 {
- width: 570px;
+ width: 50%;
}
.span5 {
- width: 470px;
+ width: 41.66666666666667%;
}
.span4 {
- width: 370px;
+ width: 33.33333333333333%;
}
.span3 {
- width: 270px;
+ width: 25%;
}
.span2 {
- width: 170px;
+ width: 16.666666666666664%;
}
.span1 {
- width: 70px;
+ width: 8.333333333333332%;
}
.offset12 {
- margin-left: 1230px;
+ margin-left: 100%;
}
.offset11 {
- margin-left: 1130px;
+ margin-left: 91.66666666666666%;
}
.offset10 {
- margin-left: 1030px;
+ margin-left: 83.33333333333334%;
}
.offset9 {
- margin-left: 930px;
+ margin-left: 75%;
}
.offset8 {
- margin-left: 830px;
+ margin-left: 66.66666666666666%;
}
.offset7 {
- margin-left: 730px;
+ margin-left: 58.333333333333336%;
}
.offset6 {
- margin-left: 630px;
+ margin-left: 50%;
}
.offset5 {
- margin-left: 530px;
+ margin-left: 41.66666666666667%;
}
.offset4 {
- margin-left: 430px;
+ margin-left: 33.33333333333333%;
}
.offset3 {
- margin-left: 330px;
+ margin-left: 25%;
}
.offset2 {
- margin-left: 230px;
+ margin-left: 16.666666666666664%;
}
.offset1 {
- margin-left: 130px;
- }
- .row-fluid {
- width: 100%;
- *zoom: 1;
- }
- .row-fluid:before,
- .row-fluid:after {
- display: table;
- line-height: 0;
- content: "";
- }
- .row-fluid:after {
- clear: both;
- }
- .row-fluid [class*="span"] {
- display: block;
- float: left;
- width: 100%;
- min-height: 30px;
- margin-left: 2.564102564102564%;
- *margin-left: 2.5109110747408616%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- .row-fluid [class*="span"]:first-child {
- margin-left: 0;
- }
- .row-fluid .span12 {
- width: 100%;
- *width: 99.94680851063829%;
- }
- .row-fluid .span11 {
- width: 91.45299145299145%;
- *width: 91.39979996362975%;
- }
- .row-fluid .span10 {
- width: 82.90598290598291%;
- *width: 82.8527914166212%;
- }
- .row-fluid .span9 {
- width: 74.35897435897436%;
- *width: 74.30578286961266%;
- }
- .row-fluid .span8 {
- width: 65.81196581196582%;
- *width: 65.75877432260411%;
- }
- .row-fluid .span7 {
- width: 57.26495726495726%;
- *width: 57.21176577559556%;
- }
- .row-fluid .span6 {
- width: 48.717948717948715%;
- *width: 48.664757228587014%;
- }
- .row-fluid .span5 {
- width: 40.17094017094017%;
- *width: 40.11774868157847%;
- }
- .row-fluid .span4 {
- width: 31.623931623931625%;
- *width: 31.570740134569924%;
- }
- .row-fluid .span3 {
- width: 23.076923076923077%;
- *width: 23.023731587561375%;
- }
- .row-fluid .span2 {
- width: 14.52991452991453%;
- *width: 14.476723040552828%;
- }
- .row-fluid .span1 {
- width: 5.982905982905983%;
- *width: 5.929714493544281%;
- }
- .row-fluid .offset12 {
- margin-left: 105.12820512820512%;
- *margin-left: 105.02182214948171%;
- }
- .row-fluid .offset12:first-child {
- margin-left: 102.56410256410257%;
- *margin-left: 102.45771958537915%;
- }
- .row-fluid .offset11 {
- margin-left: 96.58119658119658%;
- *margin-left: 96.47481360247316%;
- }
- .row-fluid .offset11:first-child {
- margin-left: 94.01709401709402%;
- *margin-left: 93.91071103837061%;
- }
- .row-fluid .offset10 {
- margin-left: 88.03418803418803%;
- *margin-left: 87.92780505546462%;
- }
- .row-fluid .offset10:first-child {
- margin-left: 85.47008547008548%;
- *margin-left: 85.36370249136206%;
- }
- .row-fluid .offset9 {
- margin-left: 79.48717948717949%;
- *margin-left: 79.38079650845607%;
- }
- .row-fluid .offset9:first-child {
- margin-left: 76.92307692307693%;
- *margin-left: 76.81669394435352%;
- }
- .row-fluid .offset8 {
- margin-left: 70.94017094017094%;
- *margin-left: 70.83378796144753%;
- }
- .row-fluid .offset8:first-child {
- margin-left: 68.37606837606839%;
- *margin-left: 68.26968539734497%;
- }
- .row-fluid .offset7 {
- margin-left: 62.393162393162385%;
- *margin-left: 62.28677941443899%;
- }
- .row-fluid .offset7:first-child {
- margin-left: 59.82905982905982%;
- *margin-left: 59.72267685033642%;
- }
- .row-fluid .offset6 {
- margin-left: 53.84615384615384%;
- *margin-left: 53.739770867430444%;
- }
- .row-fluid .offset6:first-child {
- margin-left: 51.28205128205128%;
- *margin-left: 51.175668303327875%;
- }
- .row-fluid .offset5 {
- margin-left: 45.299145299145295%;
- *margin-left: 45.1927623204219%;
- }
- .row-fluid .offset5:first-child {
- margin-left: 42.73504273504273%;
- *margin-left: 42.62865975631933%;
- }
- .row-fluid .offset4 {
- margin-left: 36.75213675213675%;
- *margin-left: 36.645753773413354%;
- }
- .row-fluid .offset4:first-child {
- margin-left: 34.18803418803419%;
- *margin-left: 34.081651209310785%;
- }
- .row-fluid .offset3 {
- margin-left: 28.205128205128204%;
- *margin-left: 28.0987452264048%;
- }
- .row-fluid .offset3:first-child {
- margin-left: 25.641025641025642%;
- *margin-left: 25.53464266230224%;
- }
- .row-fluid .offset2 {
- margin-left: 19.65811965811966%;
- *margin-left: 19.551736679396257%;
- }
- .row-fluid .offset2:first-child {
- margin-left: 17.094017094017094%;
- *margin-left: 16.98763411529369%;
- }
- .row-fluid .offset1 {
- margin-left: 11.11111111111111%;
- *margin-left: 11.004728132387708%;
- }
- .row-fluid .offset1:first-child {
- margin-left: 8.547008547008547%;
- *margin-left: 8.440625568285142%;
- }
- input,
- textarea,
- .uneditable-input {
- margin-left: 0;
- }
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: 30px;
- }
- input.span12,
- textarea.span12,
- .uneditable-input.span12 {
- width: 1156px;
- }
- input.span11,
- textarea.span11,
- .uneditable-input.span11 {
- width: 1056px;
- }
- input.span10,
- textarea.span10,
- .uneditable-input.span10 {
- width: 956px;
- }
- input.span9,
- textarea.span9,
- .uneditable-input.span9 {
- width: 856px;
- }
- input.span8,
- textarea.span8,
- .uneditable-input.span8 {
- width: 756px;
- }
- input.span7,
- textarea.span7,
- .uneditable-input.span7 {
- width: 656px;
- }
- input.span6,
- textarea.span6,
- .uneditable-input.span6 {
- width: 556px;
- }
- input.span5,
- textarea.span5,
- .uneditable-input.span5 {
- width: 456px;
- }
- input.span4,
- textarea.span4,
- .uneditable-input.span4 {
- width: 356px;
- }
- input.span3,
- textarea.span3,
- .uneditable-input.span3 {
- width: 256px;
- }
- input.span2,
- textarea.span2,
- .uneditable-input.span2 {
- width: 156px;
- }
- input.span1,
- textarea.span1,
- .uneditable-input.span1 {
- width: 56px;
+ margin-left: 8.333333333333332%;
}
.thumbnails {
margin-left: -30px;
@@ -433,14 +198,12 @@
.thumbnails > li {
margin-left: 30px;
}
- .row-fluid .thumbnails {
- margin-left: 0;
- }
}
@media (min-width: 768px) and (max-width: 979px) {
.row {
- margin-left: -20px;
+ margin-right: -10px;
+ margin-left: -10px;
*zoom: 1;
}
.row:before,
@@ -455,324 +218,83 @@
[class*="span"] {
float: left;
min-height: 1px;
- margin-left: 20px;
- }
- .container,
- .navbar-static-top .container,
- .navbar-fixed-top .container,
- .navbar-fixed-bottom .container {
- width: 724px;
+ padding-right: 10px;
+ padding-left: 10px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.span12 {
- width: 724px;
+ width: 100%;
}
.span11 {
- width: 662px;
+ width: 91.66666666666666%;
}
.span10 {
- width: 600px;
+ width: 83.33333333333334%;
}
.span9 {
- width: 538px;
+ width: 75%;
}
.span8 {
- width: 476px;
+ width: 66.66666666666666%;
}
.span7 {
- width: 414px;
+ width: 58.333333333333336%;
}
.span6 {
- width: 352px;
+ width: 50%;
}
.span5 {
- width: 290px;
+ width: 41.66666666666667%;
}
.span4 {
- width: 228px;
+ width: 33.33333333333333%;
}
.span3 {
- width: 166px;
+ width: 25%;
}
.span2 {
- width: 104px;
+ width: 16.666666666666664%;
}
.span1 {
- width: 42px;
+ width: 8.333333333333332%;
}
.offset12 {
- margin-left: 764px;
+ margin-left: 100%;
}
.offset11 {
- margin-left: 702px;
+ margin-left: 91.66666666666666%;
}
.offset10 {
- margin-left: 640px;
+ margin-left: 83.33333333333334%;
}
.offset9 {
- margin-left: 578px;
+ margin-left: 75%;
}
.offset8 {
- margin-left: 516px;
+ margin-left: 66.66666666666666%;
}
.offset7 {
- margin-left: 454px;
+ margin-left: 58.333333333333336%;
}
.offset6 {
- margin-left: 392px;
+ margin-left: 50%;
}
.offset5 {
- margin-left: 330px;
+ margin-left: 41.66666666666667%;
}
.offset4 {
- margin-left: 268px;
+ margin-left: 33.33333333333333%;
}
.offset3 {
- margin-left: 206px;
+ margin-left: 25%;
}
.offset2 {
- margin-left: 144px;
+ margin-left: 16.666666666666664%;
}
.offset1 {
- margin-left: 82px;
- }
- .row-fluid {
- width: 100%;
- *zoom: 1;
- }
- .row-fluid:before,
- .row-fluid:after {
- display: table;
- line-height: 0;
- content: "";
- }
- .row-fluid:after {
- clear: both;
- }
- .row-fluid [class*="span"] {
- display: block;
- float: left;
- width: 100%;
- min-height: 30px;
- margin-left: 2.7624309392265194%;
- *margin-left: 2.709239449864817%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- .row-fluid [class*="span"]:first-child {
- margin-left: 0;
- }
- .row-fluid .span12 {
- width: 100%;
- *width: 99.94680851063829%;
- }
- .row-fluid .span11 {
- width: 91.43646408839778%;
- *width: 91.38327259903608%;
- }
- .row-fluid .span10 {
- width: 82.87292817679558%;
- *width: 82.81973668743387%;
- }
- .row-fluid .span9 {
- width: 74.30939226519337%;
- *width: 74.25620077583166%;
- }
- .row-fluid .span8 {
- width: 65.74585635359117%;
- *width: 65.69266486422946%;
- }
- .row-fluid .span7 {
- width: 57.18232044198895%;
- *width: 57.12912895262725%;
- }
- .row-fluid .span6 {
- width: 48.61878453038674%;
- *width: 48.56559304102504%;
- }
- .row-fluid .span5 {
- width: 40.05524861878453%;
- *width: 40.00205712942283%;
- }
- .row-fluid .span4 {
- width: 31.491712707182323%;
- *width: 31.43852121782062%;
- }
- .row-fluid .span3 {
- width: 22.92817679558011%;
- *width: 22.87498530621841%;
- }
- .row-fluid .span2 {
- width: 14.3646408839779%;
- *width: 14.311449394616199%;
- }
- .row-fluid .span1 {
- width: 5.801104972375691%;
- *width: 5.747913483013988%;
- }
- .row-fluid .offset12 {
- margin-left: 105.52486187845304%;
- *margin-left: 105.41847889972962%;
- }
- .row-fluid .offset12:first-child {
- margin-left: 102.76243093922652%;
- *margin-left: 102.6560479605031%;
- }
- .row-fluid .offset11 {
- margin-left: 96.96132596685082%;
- *margin-left: 96.8549429881274%;
- }
- .row-fluid .offset11:first-child {
- margin-left: 94.1988950276243%;
- *margin-left: 94.09251204890089%;
- }
- .row-fluid .offset10 {
- margin-left: 88.39779005524862%;
- *margin-left: 88.2914070765252%;
- }
- .row-fluid .offset10:first-child {
- margin-left: 85.6353591160221%;
- *margin-left: 85.52897613729868%;
- }
- .row-fluid .offset9 {
- margin-left: 79.8342541436464%;
- *margin-left: 79.72787116492299%;
- }
- .row-fluid .offset9:first-child {
- margin-left: 77.07182320441989%;
- *margin-left: 76.96544022569647%;
- }
- .row-fluid .offset8 {
- margin-left: 71.2707182320442%;
- *margin-left: 71.16433525332079%;
- }
- .row-fluid .offset8:first-child {
- margin-left: 68.50828729281768%;
- *margin-left: 68.40190431409427%;
- }
- .row-fluid .offset7 {
- margin-left: 62.70718232044199%;
- *margin-left: 62.600799341718584%;
- }
- .row-fluid .offset7:first-child {
- margin-left: 59.94475138121547%;
- *margin-left: 59.838368402492065%;
- }
- .row-fluid .offset6 {
- margin-left: 54.14364640883978%;
- *margin-left: 54.037263430116376%;
- }
- .row-fluid .offset6:first-child {
- margin-left: 51.38121546961326%;
- *margin-left: 51.27483249088986%;
- }
- .row-fluid .offset5 {
- margin-left: 45.58011049723757%;
- *margin-left: 45.47372751851417%;
- }
- .row-fluid .offset5:first-child {
- margin-left: 42.81767955801105%;
- *margin-left: 42.71129657928765%;
- }
- .row-fluid .offset4 {
- margin-left: 37.01657458563536%;
- *margin-left: 36.91019160691196%;
- }
- .row-fluid .offset4:first-child {
- margin-left: 34.25414364640884%;
- *margin-left: 34.14776066768544%;
- }
- .row-fluid .offset3 {
- margin-left: 28.45303867403315%;
- *margin-left: 28.346655695309746%;
- }
- .row-fluid .offset3:first-child {
- margin-left: 25.69060773480663%;
- *margin-left: 25.584224756083227%;
- }
- .row-fluid .offset2 {
- margin-left: 19.88950276243094%;
- *margin-left: 19.783119783707537%;
- }
- .row-fluid .offset2:first-child {
- margin-left: 17.12707182320442%;
- *margin-left: 17.02068884448102%;
- }
- .row-fluid .offset1 {
- margin-left: 11.32596685082873%;
- *margin-left: 11.219583872105325%;
- }
- .row-fluid .offset1:first-child {
- margin-left: 8.56353591160221%;
- *margin-left: 8.457152932878806%;
- }
- input,
- textarea,
- .uneditable-input {
- margin-left: 0;
- }
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: 20px;
- }
- input.span12,
- textarea.span12,
- .uneditable-input.span12 {
- width: 710px;
- }
- input.span11,
- textarea.span11,
- .uneditable-input.span11 {
- width: 648px;
- }
- input.span10,
- textarea.span10,
- .uneditable-input.span10 {
- width: 586px;
- }
- input.span9,
- textarea.span9,
- .uneditable-input.span9 {
- width: 524px;
- }
- input.span8,
- textarea.span8,
- .uneditable-input.span8 {
- width: 462px;
- }
- input.span7,
- textarea.span7,
- .uneditable-input.span7 {
- width: 400px;
- }
- input.span6,
- textarea.span6,
- .uneditable-input.span6 {
- width: 338px;
- }
- input.span5,
- textarea.span5,
- .uneditable-input.span5 {
- width: 276px;
- }
- input.span4,
- textarea.span4,
- .uneditable-input.span4 {
- width: 214px;
- }
- input.span3,
- textarea.span3,
- .uneditable-input.span3 {
- width: 152px;
- }
- input.span2,
- textarea.span2,
- .uneditable-input.span2 {
- width: 90px;
- }
- input.span1,
- textarea.span1,
- .uneditable-input.span1 {
- width: 28px;
+ margin-left: 8.333333333333332%;
}
}
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index b863b1266d..b3adee6662 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -197,8 +197,15 @@ a:hover {
border-radius: 500px;
}
+.container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+ width: 940px;
+}
+
.row {
- margin-left: -20px;
+ margin-right: -10px;
+ margin-left: -10px;
*zoom: 1;
}
@@ -216,322 +223,107 @@ a:hover {
[class*="span"] {
float: left;
min-height: 1px;
- margin-left: 20px;
-}
-
-.container,
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
- width: 940px;
+ padding-right: 10px;
+ padding-left: 10px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.span12 {
- width: 940px;
+ width: 100%;
}
.span11 {
- width: 860px;
+ width: 91.66666666666666%;
}
.span10 {
- width: 780px;
+ width: 83.33333333333334%;
}
.span9 {
- width: 700px;
+ width: 75%;
}
.span8 {
- width: 620px;
+ width: 66.66666666666666%;
}
.span7 {
- width: 540px;
+ width: 58.333333333333336%;
}
.span6 {
- width: 460px;
+ width: 50%;
}
.span5 {
- width: 380px;
+ width: 41.66666666666667%;
}
.span4 {
- width: 300px;
+ width: 33.33333333333333%;
}
.span3 {
- width: 220px;
+ width: 25%;
}
.span2 {
- width: 140px;
+ width: 16.666666666666664%;
}
.span1 {
- width: 60px;
+ width: 8.333333333333332%;
}
.offset12 {
- margin-left: 980px;
+ margin-left: 100%;
}
.offset11 {
- margin-left: 900px;
+ margin-left: 91.66666666666666%;
}
.offset10 {
- margin-left: 820px;
+ margin-left: 83.33333333333334%;
}
.offset9 {
- margin-left: 740px;
+ margin-left: 75%;
}
.offset8 {
- margin-left: 660px;
+ margin-left: 66.66666666666666%;
}
.offset7 {
- margin-left: 580px;
+ margin-left: 58.333333333333336%;
}
.offset6 {
- margin-left: 500px;
+ margin-left: 50%;
}
.offset5 {
- margin-left: 420px;
+ margin-left: 41.66666666666667%;
}
.offset4 {
- margin-left: 340px;
+ margin-left: 33.33333333333333%;
}
.offset3 {
- margin-left: 260px;
+ margin-left: 25%;
}
.offset2 {
- margin-left: 180px;
+ margin-left: 16.666666666666664%;
}
.offset1 {
- margin-left: 100px;
-}
-
-.row-fluid {
- width: 100%;
- *zoom: 1;
-}
-
-.row-fluid:before,
-.row-fluid:after {
- display: table;
- line-height: 0;
- content: "";
-}
-
-.row-fluid:after {
- clear: both;
-}
-
-.row-fluid [class*="span"] {
- display: block;
- float: left;
- width: 100%;
- min-height: 30px;
- margin-left: 2.127659574468085%;
- *margin-left: 2.074468085106383%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.row-fluid [class*="span"]:first-child {
- margin-left: 0;
-}
-
-.row-fluid .span12 {
- width: 100%;
- *width: 99.94680851063829%;
-}
-
-.row-fluid .span11 {
- width: 91.48936170212765%;
- *width: 91.43617021276594%;
-}
-
-.row-fluid .span10 {
- width: 82.97872340425532%;
- *width: 82.92553191489361%;
-}
-
-.row-fluid .span9 {
- width: 74.46808510638297%;
- *width: 74.41489361702126%;
-}
-
-.row-fluid .span8 {
- width: 65.95744680851064%;
- *width: 65.90425531914893%;
-}
-
-.row-fluid .span7 {
- width: 57.44680851063829%;
- *width: 57.39361702127659%;
-}
-
-.row-fluid .span6 {
- width: 48.93617021276595%;
- *width: 48.88297872340425%;
-}
-
-.row-fluid .span5 {
- width: 40.42553191489362%;
- *width: 40.37234042553192%;
-}
-
-.row-fluid .span4 {
- width: 31.914893617021278%;
- *width: 31.861702127659576%;
-}
-
-.row-fluid .span3 {
- width: 23.404255319148934%;
- *width: 23.351063829787233%;
-}
-
-.row-fluid .span2 {
- width: 14.893617021276595%;
- *width: 14.840425531914894%;
-}
-
-.row-fluid .span1 {
- width: 6.382978723404255%;
- *width: 6.329787234042553%;
-}
-
-.row-fluid .offset12 {
- margin-left: 104.25531914893617%;
- *margin-left: 104.14893617021275%;
-}
-
-.row-fluid .offset12:first-child {
- margin-left: 102.12765957446808%;
- *margin-left: 102.02127659574467%;
-}
-
-.row-fluid .offset11 {
- margin-left: 95.74468085106382%;
- *margin-left: 95.6382978723404%;
-}
-
-.row-fluid .offset11:first-child {
- margin-left: 93.61702127659574%;
- *margin-left: 93.51063829787232%;
-}
-
-.row-fluid .offset10 {
- margin-left: 87.23404255319149%;
- *margin-left: 87.12765957446807%;
-}
-
-.row-fluid .offset10:first-child {
- margin-left: 85.1063829787234%;
- *margin-left: 84.99999999999999%;
-}
-
-.row-fluid .offset9 {
- margin-left: 78.72340425531914%;
- *margin-left: 78.61702127659572%;
-}
-
-.row-fluid .offset9:first-child {
- margin-left: 76.59574468085106%;
- *margin-left: 76.48936170212764%;
-}
-
-.row-fluid .offset8 {
- margin-left: 70.2127659574468%;
- *margin-left: 70.10638297872339%;
-}
-
-.row-fluid .offset8:first-child {
- margin-left: 68.08510638297872%;
- *margin-left: 67.9787234042553%;
-}
-
-.row-fluid .offset7 {
- margin-left: 61.70212765957446%;
- *margin-left: 61.59574468085106%;
-}
-
-.row-fluid .offset7:first-child {
- margin-left: 59.574468085106375%;
- *margin-left: 59.46808510638297%;
-}
-
-.row-fluid .offset6 {
- margin-left: 53.191489361702125%;
- *margin-left: 53.085106382978715%;
-}
-
-.row-fluid .offset6:first-child {
- margin-left: 51.063829787234035%;
- *margin-left: 50.95744680851063%;
-}
-
-.row-fluid .offset5 {
- margin-left: 44.68085106382979%;
- *margin-left: 44.57446808510638%;
-}
-
-.row-fluid .offset5:first-child {
- margin-left: 42.5531914893617%;
- *margin-left: 42.4468085106383%;
-}
-
-.row-fluid .offset4 {
- margin-left: 36.170212765957444%;
- *margin-left: 36.06382978723405%;
-}
-
-.row-fluid .offset4:first-child {
- margin-left: 34.04255319148936%;
- *margin-left: 33.93617021276596%;
-}
-
-.row-fluid .offset3 {
- margin-left: 27.659574468085104%;
- *margin-left: 27.5531914893617%;
-}
-
-.row-fluid .offset3:first-child {
- margin-left: 25.53191489361702%;
- *margin-left: 25.425531914893618%;
-}
-
-.row-fluid .offset2 {
- margin-left: 19.148936170212764%;
- *margin-left: 19.04255319148936%;
-}
-
-.row-fluid .offset2:first-child {
- margin-left: 17.02127659574468%;
- *margin-left: 16.914893617021278%;
-}
-
-.row-fluid .offset1 {
- margin-left: 10.638297872340425%;
- *margin-left: 10.53191489361702%;
-}
-
-.row-fluid .offset1:first-child {
- margin-left: 8.51063829787234%;
- *margin-left: 8.404255319148938%;
+ margin-left: 8.333333333333332%;
}
[class*="span"].hide,
@@ -1188,86 +980,11 @@ textarea[class*="span"],
display: inline-block;
}
-input,
-textarea,
-.uneditable-input {
- margin-left: 0;
-}
-
-.controls-row [class*="span"] + [class*="span"] {
- margin-left: 20px;
-}
-
-input.span12,
-textarea.span12,
-.uneditable-input.span12 {
- width: 926px;
-}
-
-input.span11,
-textarea.span11,
-.uneditable-input.span11 {
- width: 846px;
-}
-
-input.span10,
-textarea.span10,
-.uneditable-input.span10 {
- width: 766px;
-}
-
-input.span9,
-textarea.span9,
-.uneditable-input.span9 {
- width: 686px;
-}
-
-input.span8,
-textarea.span8,
-.uneditable-input.span8 {
- width: 606px;
-}
-
-input.span7,
-textarea.span7,
-.uneditable-input.span7 {
- width: 526px;
-}
-
-input.span6,
-textarea.span6,
-.uneditable-input.span6 {
- width: 446px;
-}
-
-input.span5,
-textarea.span5,
-.uneditable-input.span5 {
- width: 366px;
-}
-
-input.span4,
-textarea.span4,
-.uneditable-input.span4 {
- width: 286px;
-}
-
-input.span3,
-textarea.span3,
-.uneditable-input.span3 {
- width: 206px;
-}
-
-input.span2,
-textarea.span2,
-.uneditable-input.span2 {
- width: 126px;
-}
-
-input.span1,
-textarea.span1,
-.uneditable-input.span1 {
- width: 46px;
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input[class*="span"] {
+ height: 30px;
}
.controls-row {
@@ -4322,7 +4039,7 @@ input[type="submit"].btn.btn-mini {
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
- width: 940px;
+ width: 100%;
}
.navbar-fixed-top {
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index a78b1b5b47..08d0dceb85 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -87,7 +87,6 @@
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#global"><i class="icon-chevron-right"></i> Global styles</a></li>
<li><a href="#gridSystem"><i class="icon-chevron-right"></i> Grid system</a></li>
- <li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> Fluid grid system</a></li>
<li><a href="#layouts"><i class="icon-chevron-right"></i> Layouts</a></li>
<li><a href="#responsive"><i class="icon-chevron-right"></i> Responsive design</a></li>
</ul>
@@ -150,18 +149,21 @@
<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="span2">2</div>
- <div class="span3">3</div>
+ <div class="span4">4</div>
+ <div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row show-grid">
- <div class="span4">4</div>
- <div class="span5">5</div>
+ <div class="span6">6</div>
+ <div class="span6">6</div>
</div>
<div class="row show-grid">
- <div class="span9">9</div>
+ <div class="span12">12</div>
</div>
</div>
@@ -180,33 +182,34 @@
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span4">4</div>
- <div class="span3 offset2">3 offset 2</div>
+ <div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
- <div class="span3 offset1">3 offset 1</div>
- <div class="span3 offset2">3 offset 2</div>
+ <div class="span3 offset3">3 offset 3</div>
+ <div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
- <div class="span6 offset3">6 offset 3</div>
+ <div class="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
<pre class="prettyprint linenums">
<div class="row">
<div class="span4">...</div>
- <div class="span3 offset2">...</div>
+ <div class="span4 offset4">...</div>
</div>
</pre>
+
<h2>Nesting columns</h2>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
<div class="row show-grid">
- <div class="span9">
+ <div class="span12">
Level 1 of column
<div class="row show-grid">
<div class="span6">
Level 2
</div>
- <div class="span3">
+ <div class="span6">
Level 2
</div>
</div>
@@ -217,116 +220,12 @@
<div class="span9">
Level 1 column
<div class="row">
- <div class="span6">Level 2</div>
- <div class="span3">Level 2</div>
- </div>
- </div>
-</div>
-</pre>
- </section>
-
-
-
- <!-- Fluid grid system
- ================================================== -->
- <section id="fluidGridSystem">
- <div class="page-header">
- <h1>Fluid grid system</h1>
- </div>
-
- <h2>Live fluid grid example</h2>
- <p>The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
- <div class="bs-docs-grid">
- <div class="row-fluid 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-fluid show-grid">
- <div class="span4">4</div>
- <div class="span4">4</div>
- <div class="span4">4</div>
- </div>
- <div class="row-fluid show-grid">
- <div class="span4">4</div>
- <div class="span8">8</div>
- </div>
- <div class="row-fluid show-grid">
- <div class="span6">6</div>
- <div class="span6">6</div>
- </div>
- <div class="row-fluid show-grid">
- <div class="span12">12</div>
- </div>
- </div>
-
- <h3>Basic fluid grid HTML</h3>
- <p>Make any row "fluid" by changing <code>.row</code> to <code>.row-fluid</code>. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.</p>
-<pre class="prettyprint linenums">
-<div class="row-fluid">
- <div class="span4">...</div>
- <div class="span8">...</div>
-</div>
-</pre>
-
- <h2>Fluid offsetting</h2>
- <p>Operates the same way as the fixed grid system offsetting: add <code>.offset*</code> to any column to offset by that many columns.</p>
- <div class="bs-docs-grid">
- <div class="row-fluid show-grid">
- <div class="span4">4</div>
- <div class="span4 offset4">4 offset 4</div>
- </div><!-- /row -->
- <div class="row-fluid show-grid">
- <div class="span3 offset3">3 offset 3</div>
- <div class="span3 offset3">3 offset 3</div>
- </div><!-- /row -->
- <div class="row-fluid show-grid">
- <div class="span6 offset6">6 offset 6</div>
- </div><!-- /row -->
- </div>
-<pre class="prettyprint linenums">
-<div class="row-fluid">
- <div class="span4">...</div>
- <div class="span4 offset2">...</div>
-</div>
-</pre>
-
- <h2>Fluid nesting</h2>
- <p>Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.</p>
- <div class="row-fluid show-grid">
- <div class="span12">
- Fluid 12
- <div class="row-fluid show-grid">
- <div class="span6">
- Fluid 6
- </div>
- <div class="span6">
- Fluid 6
- </div>
- </div>
- </div>
- </div>
-<pre class="prettyprint linenums">
-<div class="row-fluid">
- <div class="span12">
- Level 1 of column
- <div class="row-fluid">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>
</pre>
-
</section>
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 3fb7841b13..f687739b38 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -16,7 +16,6 @@
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#global"><i class="icon-chevron-right"></i> {{_i}}Global styles{{/i}}</a></li>
<li><a href="#gridSystem"><i class="icon-chevron-right"></i> {{_i}}Grid system{{/i}}</a></li>
- <li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> {{_i}}Fluid grid system{{/i}}</a></li>
<li><a href="#layouts"><i class="icon-chevron-right"></i> {{_i}}Layouts{{/i}}</a></li>
<li><a href="#responsive"><i class="icon-chevron-right"></i> {{_i}}Responsive design{{/i}}</a></li>
</ul>
@@ -79,18 +78,21 @@
<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="span2">2</div>
- <div class="span3">3</div>
+ <div class="span4">4</div>
+ <div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row show-grid">
- <div class="span4">4</div>
- <div class="span5">5</div>
+ <div class="span6">6</div>
+ <div class="span6">6</div>
</div>
<div class="row show-grid">
- <div class="span9">9</div>
+ <div class="span12">12</div>
</div>
</div>
@@ -109,33 +111,34 @@
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span4">4</div>
- <div class="span3 offset2">3 offset 2</div>
+ <div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
- <div class="span3 offset1">3 offset 1</div>
- <div class="span3 offset2">3 offset 2</div>
+ <div class="span3 offset3">3 offset 3</div>
+ <div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
- <div class="span6 offset3">6 offset 3</div>
+ <div class="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
<pre class="prettyprint linenums">
<div class="row">
<div class="span4">...</div>
- <div class="span3 offset2">...</div>
+ <div class="span4 offset4">...</div>
</div>
</pre>
+
<h2>{{_i}}Nesting columns{{/i}}</h2>
<p>{{_i}}To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}</p>
<div class="row show-grid">
- <div class="span9">
+ <div class="span12">
{{_i}}Level 1 of column{{/i}}
<div class="row show-grid">
<div class="span6">
{{_i}}Level 2{{/i}}
</div>
- <div class="span3">
+ <div class="span6">
{{_i}}Level 2{{/i}}
</div>
</div>
@@ -146,116 +149,12 @@
<div class="span9">
{{_i}}Level 1 column{{/i}}
<div class="row">
- <div class="span6">{{_i}}Level 2{{/i}}</div>
- <div class="span3">{{_i}}Level 2{{/i}}</div>
- </div>
- </div>
-</div>
-</pre>
- </section>
-
-
-
- <!-- Fluid grid system
- ================================================== -->
- <section id="fluidGridSystem">
- <div class="page-header">
- <h1>{{_i}}Fluid grid system{{/i}}</h1>
- </div>
-
- <h2>{{_i}}Live fluid grid example{{/i}}</h2>
- <p>{{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
- <div class="bs-docs-grid">
- <div class="row-fluid 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-fluid show-grid">
- <div class="span4">4</div>
- <div class="span4">4</div>
- <div class="span4">4</div>
- </div>
- <div class="row-fluid show-grid">
- <div class="span4">4</div>
- <div class="span8">8</div>
- </div>
- <div class="row-fluid show-grid">
- <div class="span6">6</div>
- <div class="span6">6</div>
- </div>
- <div class="row-fluid show-grid">
- <div class="span12">12</div>
- </div>
- </div>
-
- <h3>{{_i}}Basic fluid grid HTML{{/i}}</h3>
- <p>{{_i}}Make any row "fluid" by changing <code>.row</code> to <code>.row-fluid</code>. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}</p>
-<pre class="prettyprint linenums">
-<div class="row-fluid">
- <div class="span4">...</div>
- <div class="span8">...</div>
-</div>
-</pre>
-
- <h2>{{_i}}Fluid offsetting{{/i}}</h2>
- <p>{{_i}}Operates the same way as the fixed grid system offsetting: add <code>.offset*</code> to any column to offset by that many columns.{{/i}}</p>
- <div class="bs-docs-grid">
- <div class="row-fluid show-grid">
- <div class="span4">4</div>
- <div class="span4 offset4">4 offset 4</div>
- </div><!-- /row -->
- <div class="row-fluid show-grid">
- <div class="span3 offset3">3 offset 3</div>
- <div class="span3 offset3">3 offset 3</div>
- </div><!-- /row -->
- <div class="row-fluid show-grid">
- <div class="span6 offset6">6 offset 6</div>
- </div><!-- /row -->
- </div>
-<pre class="prettyprint linenums">
-<div class="row-fluid">
- <div class="span4">...</div>
- <div class="span4 offset2">...</div>
-</div>
-</pre>
-
- <h2>{{_i}}Fluid nesting{{/i}}</h2>
- <p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}</p>
- <div class="row-fluid show-grid">
- <div class="span12">
- {{_i}}Fluid 12{{/i}}
- <div class="row-fluid show-grid">
- <div class="span6">
- {{_i}}Fluid 6{{/i}}
- </div>
- <div class="span6">
- {{_i}}Fluid 6{{/i}}
- </div>
- </div>
- </div>
- </div>
-<pre class="prettyprint linenums">
-<div class="row-fluid">
- <div class="span12">
- {{_i}}Level 1 of column{{/i}}
- <div class="row-fluid">
<div class="span6">{{_i}}Level 2{{/i}}</div>
<div class="span6">{{_i}}Level 2{{/i}}</div>
</div>
</div>
</div>
</pre>
-
</section>
diff --git a/less/forms.less b/less/forms.less
index 17fbaf857b..e1af6766a1 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -297,9 +297,12 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS
// ----------------------
-// Grid sizes
-#grid > .input(@gridColumnWidth, @gridGutterWidth);
-
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input[class*="span"] {
+ height: 30px;
+}
// Control row for multiple inputs per line
.controls-row {
.clearfix(); // Clear the float from controls
diff --git a/less/grid.less b/less/grid.less
index 750d203514..cab62ce5b1 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -3,11 +3,13 @@
// --------------------------------------------------
-// Fixed (940px)
-#grid > .core(@gridColumnWidth, @gridGutterWidth);
+// Set the container width, and override it for fixed navbars in media queries
+.container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container { width: 940px; }
-// Fluid (940px)
-#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
+// Fixed (940px)
+#grid > .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
// Reset utility classes due to specificity
[class*="span"].hide,
diff --git a/less/mixins.less b/less/mixins.less
index 0aba0be63c..3da17ffe6c 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -556,7 +556,7 @@
// The Grid
#grid {
- .core (@gridColumnWidth, @gridGutterWidth) {
+ .core (@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
.spanX (@index) when (@index > 0) {
(~".span@{index}") { .span(@index); }
@@ -571,112 +571,33 @@
.offsetX (0) {}
.offset (@columns) {
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
+ margin-left: percentage(@columns / @gridColumns);
}
.span (@columns) {
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+ width: percentage(@columns / @gridColumns);
}
.row {
- margin-left: @gridGutterWidth * -1;
+ margin-left: @gridGutterWidth / -2;
+ margin-right: @gridGutterWidth / -2;
.clearfix();
}
[class*="span"] {
float: left;
- min-height: 1px; // prevent collapsing columns
- margin-left: @gridGutterWidth;
+ min-height: 1px; // prevent column collapsing
+ padding-left: @gridGutterWidth / 2;
+ padding-right: @gridGutterWidth / 2;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
- // Set the container width, and override it for fixed navbars in media queries
- .container,
- .navbar-static-top .container,
- .navbar-fixed-top .container,
- .navbar-fixed-bottom .container { .span(@gridColumns); }
-
// generate .spanX and .offsetX
.spanX (@gridColumns);
.offsetX (@gridColumns);
}
- .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
-
- .spanX (@index) when (@index > 0) {
- (~".span@{index}") { .span(@index); }
- .spanX(@index - 1);
- }
- .spanX (0) {}
-
- .offsetX (@index) when (@index > 0) {
- (~'.offset@{index}') { .offset(@index); }
- (~'.offset@{index}:first-child') { .offsetFirstChild(@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;
- }
-
- // 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) {}
-
- .span(@columns) {
- width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
- }
-
- input,
- textarea,
- .uneditable-input {
- margin-left: 0; // override margin-left from core grid system
- }
-
- // Space grid-sized controls properly if multiple per line
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: @gridGutterWidth;
- }
-
- // generate .spanX
- .spanX (@gridColumns);
-
- }
-
}
diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less
index 4f35ba6ca2..8b909b8cdb 100644
--- a/less/responsive-1200px-min.less
+++ b/less/responsive-1200px-min.less
@@ -5,14 +5,15 @@
@media (min-width: 1200px) {
- // Fixed grid
- #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
-
- // Fluid grid
- #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
+ // Set the container width, and override it for fixed navbars in media queries
+ .container,
+ .navbar-fixed-top .container,
+ .navbar-fixed-bottom .container {
+ width: 1170px;
+ }
- // Input grid
- #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
+ // Fixed grid
+ #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
// Thumbnails
.thumbnails {
@@ -21,8 +22,5 @@
.thumbnails > li {
margin-left: @gridGutterWidth1200;
}
- .row-fluid .thumbnails {
- margin-left: 0;
- }
}
diff --git a/less/responsive-768px-979px.less b/less/responsive-768px-979px.less
index 8e8c486a06..09636ccdb0 100644
--- a/less/responsive-768px-979px.less
+++ b/less/responsive-768px-979px.less
@@ -6,14 +6,6 @@
@media (min-width: 768px) and (max-width: 979px) {
// Fixed grid
- #grid > .core(@gridColumnWidth768, @gridGutterWidth768);
-
- // Fluid grid
- #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
-
- // Input grid
- #grid > .input(@gridColumnWidth768, @gridGutterWidth768);
-
- // No need to reset .thumbnails here since it's the same @gridGutterWidth
+ #grid > .core(@gridColumnWidth768, @gridGutterWidth768, @gridRowWidth768);
}
diff --git a/less/variables.less b/less/variables.less
index 7d6efe0050..82871de1ac 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -263,17 +263,3 @@
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
-
-
-// Fluid grid
-// -------------------------
-@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
-@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
-
-// 1200px min
-@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
-@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
-
-// 768px-979px
-@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
-@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
--
GitLab