From 4fa931e403ec3ae2f8f7f690c6c4040365f68ba9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:11:31 -0800 Subject: fix the navbar click and a few jank responsive problems --- docs/assets/css/bootstrap-responsive.css | 142 ++++++++++++++++++------------- 1 file changed, 84 insertions(+), 58 deletions(-) (limited to 'docs/assets/css/bootstrap-responsive.css') diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 631c904e7..b0fbd9d7b 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -175,22 +175,23 @@ margin-bottom: 36px; } .navbar-inner { - padding: 10px; + padding: 5px; background-image: none; } .navbar .container { padding: 0; } .navbar .brand { - float: none; - display: block; - padding-left: 15px; - padding-right: 15px; - margin: 0; + padding-left: 10px; + padding-right: 10px; + margin: 0 0 0 -5px; + } + .navbar .nav-collapse { + clear: left; } .navbar .nav { float: none; - margin: 9px 0; + margin: 0 0 9px; } .navbar .nav > li { float: none; @@ -217,8 +218,10 @@ } .navbar .dropdown-menu { position: static; - display: block; + top: auto; + left: auto; float: none; + display: block; max-width: none; margin: 0 15px; padding: 0; @@ -263,60 +266,83 @@ height: 0; } } -/* @media (min-width: 1210px) { - - // Reset grid variables - @gridColumns: 12; - @gridColumnWidth: 70px; - @gridGutterWidth: 30px; - @siteWidth: 1170px; - - // Bring grid mixins to recalculate widths - .columns(@columns: 1) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - .offset(@columns: 1) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); - } - .container { - width: @siteWidth; + width: 1170px; } .row { - margin-left: @gridGutterWidth * -1; + margin-left: -30px; } [class*="span"] { - margin-left: @gridGutterWidth; - } - - // Default columns - .span1 { .columns(1); } - .span2 { .columns(2); } - .span3 { .columns(3); } - .span4 { .columns(4); } - .span5 { .columns(5); } - .span6 { .columns(6); } - .span7 { .columns(7); } - .span8 { .columns(8); } - .span9 { .columns(9); } - .span10 { .columns(10); } - .span11 { .columns(11); } - .span12 { .columns(12); } - - // Offset column options - .offset1 { .offset(1); } - .offset2 { .offset(2); } - .offset3 { .offset(3); } - .offset4 { .offset(4); } - .offset5 { .offset(5); } - .offset6 { .offset(6); } - .offset7 { .offset(7); } - .offset8 { .offset(8); } - .offset9 { .offset(9); } - .offset10 { .offset(10); } - .offset11 { .offset(11); } - .offset12 { .offset(12); } - + margin-left: 30px; + } + .span1 { + width: 70px; + } + .span2 { + width: 170px; + } + .span3 { + width: 270px; + } + .span4 { + width: 370px; + } + .span5 { + width: 470px; + } + .span6 { + width: 570px; + } + .span7 { + width: 670px; + } + .span8 { + width: 770px; + } + .span9 { + width: 870px; + } + .span10 { + width: 970px; + } + .span11 { + width: 1070px; + } + .span12 { + width: 1170px; + } + .offset1 { + margin-left: 130px; + } + .offset2 { + margin-left: 230px; + } + .offset3 { + margin-left: 330px; + } + .offset4 { + margin-left: 430px; + } + .offset5 { + margin-left: 530px; + } + .offset6 { + margin-left: 630px; + } + .offset7 { + margin-left: 730px; + } + .offset8 { + margin-left: 830px; + } + .offset9 { + margin-left: 930px; + } + .offset10 { + margin-left: 1030px; + } + .offset11 { + margin-left: 1130px; + } } -*/ \ No newline at end of file -- cgit v1.2.3 From e532228721734492d6f2741f729525cc1bb3c77c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:25:05 -0800 Subject: more responsive tweaks for tablet --- docs/assets/css/bootstrap-responsive.css | 55 +++++++++++++++----------------- 1 file changed, 26 insertions(+), 29 deletions(-) (limited to 'docs/assets/css/bootstrap-responsive.css') diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index b0fbd9d7b..bbfc0ac5a 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -89,81 +89,78 @@ } @media (min-width: 768px) and (max-width: 940px) { .container { - width: 748px; - padding-left: 10px; - padding-right: 10px; + width: 724px; + padding-left: 20px; + padding-right: 20px; } .span1 { - width: 44px; + width: 42px; } .span2 { - width: 108px; + width: 104px; } .span3 { - width: 172px; + width: 166px; } .span4 { - width: 236px; + width: 228px; } .span5 { - width: 300px; + width: 290px; } .span6 { - width: 364px; + width: 352px; } .span7 { - width: 428px; + width: 414px; } .span8 { - width: 492px; + width: 476px; } .span9 { - width: 556px; + width: 538px; } .span10 { - width: 620px; + width: 600px; } .span11 { - width: 684px; + width: 662px; } .span12 { - width: 748px; + width: 724px; } .offset1 { - margin-left: 84px; + margin-left: 82px; } .offset2 { - margin-left: 148px; + margin-left: 144px; } .offset3 { - margin-left: 212px; + margin-left: 206px; } .offset4 { - margin-left: 276px; + margin-left: 268px; } .offset5 { - margin-left: 340px; + margin-left: 330px; } .offset6 { - margin-left: 404px; + margin-left: 392px; } .offset7 { - margin-left: 468px; + margin-left: 454px; } .offset8 { - margin-left: 532px; + margin-left: 516px; } .offset9 { - margin-left: 596px; + margin-left: 578px; } .offset10 { - margin-left: 660px; + margin-left: 640px; } .offset11 { - margin-left: 724px; - } - .offset12 { - margin-left: 788px; + margin-left: 702px; } } @media (max-width: 940px) { -- cgit v1.2.3 From f1e520badd51d01ebcd33758966ef868e5cdd1c2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 20:34:07 -0800 Subject: clarify and tweak media queries --- docs/assets/css/bootstrap-responsive.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/assets/css/bootstrap-responsive.css') diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index bbfc0ac5a..f40f0c110 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -263,7 +263,7 @@ height: 0; } } -@media (min-width: 1210px) { +@media (min-width: 1200px) { .container { width: 1170px; } -- cgit v1.2.3 From 62f4a1571a3801c867b80c228464cc9c695f1d13 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:48:25 -0800 Subject: revamped the thumbnails examples to make them work and look better at higher resolution --- docs/assets/css/bootstrap-responsive.css | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'docs/assets/css/bootstrap-responsive.css') diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index f40f0c110..ca03cecde 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -342,4 +342,10 @@ .offset11 { margin-left: 1130px; } + .thumbnails { + margin-left: -30px; + } + .thumbnails > li { + margin-left: 30px; + } } -- cgit v1.2.3 From 48529ad01fa2a60bfc9179743dcb5379e8ff944f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:06:57 -0800 Subject: last minute addition of a simple fluid grid for our fluid examples; it needs work, so we're not documenting it now --- docs/assets/css/bootstrap-responsive.css | 101 +++++++++++++++++++++++++++++-- 1 file changed, 96 insertions(+), 5 deletions(-) (limited to 'docs/assets/css/bootstrap-responsive.css') diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index ca03cecde..44e0125c1 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -77,6 +77,9 @@ width: auto; padding: 0 20px; } + .row-fluid { + width: 100%; + } .row { margin-left: 0; } @@ -162,6 +165,50 @@ .offset11 { margin-left: 702px; } + .row-fluid { + width: 102.76243093919337%; + margin-left: -2.762430939%; + } + .row-fluid [class*="span"] { + float: left; + margin-left: 2.762430939%; + } + .row-fluid .span1 { + width: 5.6451612899588115%; + } + .row-fluid .span2 { + width: 13.978494622708812%; + } + .row-fluid .span3 { + width: 22.31182795545881%; + } + .row-fluid .span4 { + width: 30.64516128820881%; + } + .row-fluid .span5 { + width: 38.97849462095881%; + } + .row-fluid .span6 { + width: 47.311827953708814%; + } + .row-fluid .span7 { + width: 55.645161286458816%; + } + .row-fluid .span8 { + width: 63.97849461920882%; + } + .row-fluid .span9 { + width: 72.31182795195882%; + } + .row-fluid .span10 { + width: 80.64516128470882%; + } + .row-fluid .span11 { + width: 88.97849461745884%; + } + .row-fluid .span12 { + width: 97.31182795020881%; + } } @media (max-width: 940px) { body { @@ -169,7 +216,7 @@ } .navbar-fixed-top { position: static; - margin-bottom: 36px; + margin-bottom: 18px; } .navbar-inner { padding: 5px; @@ -264,6 +311,12 @@ } } @media (min-width: 1200px) { + .thumbnails { + margin-left: -30px; + } + .thumbnails > li { + margin-left: 30px; + } .container { width: 1170px; } @@ -342,10 +395,48 @@ .offset11 { margin-left: 1130px; } - .thumbnails { - margin-left: -30px; + .row-fluid { + width: 102.56143440326584%; + margin-left: -2.56%; } - .thumbnails > li { - margin-left: 30px; + .row-fluid [class*="span"] { + float: left; + margin-left: 2.56%; + } + .row-fluid .span1 { + width: 5.832601732615312%; + } + .row-fluid .span2 { + width: 14.16126839928198%; + } + .row-fluid .span3 { + width: 22.489935065948643%; + } + .row-fluid .span4 { + width: 30.818601732615313%; + } + .row-fluid .span5 { + width: 39.14726839928198%; + } + .row-fluid .span6 { + width: 47.47593506594863%; + } + .row-fluid .span7 { + width: 55.8046017326153%; + } + .row-fluid .span8 { + width: 64.13326839928197%; + } + .row-fluid .span9 { + width: 72.46193506594864%; + } + .row-fluid .span10 { + width: 80.7906017326153%; + } + .row-fluid .span11 { + width: 89.11926839928198%; + } + .row-fluid .span12 { + width: 97.44793506594864%; } } -- cgit v1.2.3