From 1583dd55e9f05275ee054884720dce2be8e2f07a Mon Sep 17 00:00:00 2001 From: Jeff Tickle Date: Thu, 1 Aug 2013 11:49:16 -0400 Subject: Added classes for lg-pull, lg-push, lg-offset, sm-pull, sm-push, sm-offset --- less/grid.less | 106 +++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 72 insertions(+), 34 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 12803f39a..dfaf4f970 100644 --- a/less/grid.less +++ b/less/grid.less @@ -125,29 +125,42 @@ .col-sm-12 { width: 100%; } // Push and pull columns for source order changes - .col-push-1 { left: percentage((1 / @grid-columns)); } - .col-push-2 { left: percentage((2 / @grid-columns)); } - .col-push-3 { left: percentage((3 / @grid-columns)); } - .col-push-4 { left: percentage((4 / @grid-columns)); } - .col-push-5 { left: percentage((5 / @grid-columns)); } - .col-push-6 { left: percentage((6 / @grid-columns)); } - .col-push-7 { left: percentage((7 / @grid-columns)); } - .col-push-8 { left: percentage((8 / @grid-columns)); } - .col-push-9 { left: percentage((9 / @grid-columns)); } - .col-push-10 { left: percentage((10/ @grid-columns)); } - .col-push-11 { left: percentage((11/ @grid-columns)); } - - .col-pull-1 { right: percentage((1 / @grid-columns)); } - .col-pull-2 { right: percentage((2 / @grid-columns)); } - .col-pull-3 { right: percentage((3 / @grid-columns)); } - .col-pull-4 { right: percentage((4 / @grid-columns)); } - .col-pull-5 { right: percentage((5 / @grid-columns)); } - .col-pull-6 { right: percentage((6 / @grid-columns)); } - .col-pull-7 { right: percentage((7 / @grid-columns)); } - .col-pull-8 { right: percentage((8 / @grid-columns)); } - .col-pull-9 { right: percentage((9 / @grid-columns)); } - .col-pull-10 { right: percentage((10/ @grid-columns)); } - .col-pull-11 { right: percentage((11/ @grid-columns)); } + .col-sm-push-1 { left: percentage((1 / @grid-columns)); } + .col-sm-push-2 { left: percentage((2 / @grid-columns)); } + .col-sm-push-3 { left: percentage((3 / @grid-columns)); } + .col-sm-push-4 { left: percentage((4 / @grid-columns)); } + .col-sm-push-5 { left: percentage((5 / @grid-columns)); } + .col-sm-push-6 { left: percentage((6 / @grid-columns)); } + .col-sm-push-7 { left: percentage((7 / @grid-columns)); } + .col-sm-push-8 { left: percentage((8 / @grid-columns)); } + .col-sm-push-9 { left: percentage((9 / @grid-columns)); } + .col-sm-push-10 { left: percentage((10/ @grid-columns)); } + .col-sm-push-11 { left: percentage((11/ @grid-columns)); } + + .col-sm-pull-1 { right: percentage((1 / @grid-columns)); } + .col-sm-pull-2 { right: percentage((2 / @grid-columns)); } + .col-sm-pull-3 { right: percentage((3 / @grid-columns)); } + .col-sm-pull-4 { right: percentage((4 / @grid-columns)); } + .col-sm-pull-5 { right: percentage((5 / @grid-columns)); } + .col-sm-pull-6 { right: percentage((6 / @grid-columns)); } + .col-sm-pull-7 { right: percentage((7 / @grid-columns)); } + .col-sm-pull-8 { right: percentage((8 / @grid-columns)); } + .col-sm-pull-9 { right: percentage((9 / @grid-columns)); } + .col-sm-pull-10 { right: percentage((10/ @grid-columns)); } + .col-sm-pull-11 { right: percentage((11/ @grid-columns)); } + + // Offsets + .col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); } } // Medium and large device columns (desktop and up) @@ -182,18 +195,43 @@ .col-lg-11 { width: percentage((11/ @grid-columns)); } .col-lg-12 { width: 100%; } + // Push and pull columns for source order changes + .col-lg-push-1 { left: percentage((1 / @grid-columns)); } + .col-lg-push-2 { left: percentage((2 / @grid-columns)); } + .col-lg-push-3 { left: percentage((3 / @grid-columns)); } + .col-lg-push-4 { left: percentage((4 / @grid-columns)); } + .col-lg-push-5 { left: percentage((5 / @grid-columns)); } + .col-lg-push-6 { left: percentage((6 / @grid-columns)); } + .col-lg-push-7 { left: percentage((7 / @grid-columns)); } + .col-lg-push-8 { left: percentage((8 / @grid-columns)); } + .col-lg-push-9 { left: percentage((9 / @grid-columns)); } + .col-lg-push-10 { left: percentage((10/ @grid-columns)); } + .col-lg-push-11 { left: percentage((11/ @grid-columns)); } + + .col-lg-pull-1 { right: percentage((1 / @grid-columns)); } + .col-lg-pull-2 { right: percentage((2 / @grid-columns)); } + .col-lg-pull-3 { right: percentage((3 / @grid-columns)); } + .col-lg-pull-4 { right: percentage((4 / @grid-columns)); } + .col-lg-pull-5 { right: percentage((5 / @grid-columns)); } + .col-lg-pull-6 { right: percentage((6 / @grid-columns)); } + .col-lg-pull-7 { right: percentage((7 / @grid-columns)); } + .col-lg-pull-8 { right: percentage((8 / @grid-columns)); } + .col-lg-pull-9 { right: percentage((9 / @grid-columns)); } + .col-lg-pull-10 { right: percentage((10/ @grid-columns)); } + .col-lg-pull-11 { right: percentage((11/ @grid-columns)); } + // Offsets - .col-offset-1 { margin-left: percentage((1 / @grid-columns)); } - .col-offset-2 { margin-left: percentage((2 / @grid-columns)); } - .col-offset-3 { margin-left: percentage((3 / @grid-columns)); } - .col-offset-4 { margin-left: percentage((4 / @grid-columns)); } - .col-offset-5 { margin-left: percentage((5 / @grid-columns)); } - .col-offset-6 { margin-left: percentage((6 / @grid-columns)); } - .col-offset-7 { margin-left: percentage((7 / @grid-columns)); } - .col-offset-8 { margin-left: percentage((8 / @grid-columns)); } - .col-offset-9 { margin-left: percentage((9 / @grid-columns)); } - .col-offset-10 { margin-left: percentage((10/ @grid-columns)); } - .col-offset-11 { margin-left: percentage((11/ @grid-columns)); } + .col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); } } // Large desktops and up -- cgit v1.2.3 From 23ef8c0c209844dd8b92d2a5ac82daffa7bd2914 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 3 Aug 2013 21:39:57 -0700 Subject: Greater standardization of sizing terminology In class names: * large => lg * small => sm * mini => xs ("Extra small") In screen size categories: * Tiny => Extra small --- less/grid.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index dfaf4f970..395a7947f 100644 --- a/less/grid.less +++ b/less/grid.less @@ -63,7 +63,7 @@ // Container and grid column sizing // -// Tiny device columns (smartphones) +// Extra small device columns (smartphones) .col-1, .col-2, .col-3, -- cgit v1.2.3 From db45a60cc86190a060f0baf0b3961cbc690f3a65 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Aug 2013 20:55:30 -0700 Subject: Scope tablet classes to tablets range only Fixes #9128 --- less/grid.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 395a7947f..5142feb65 100644 --- a/less/grid.less +++ b/less/grid.less @@ -92,7 +92,7 @@ .col-12 { width: 100%; } // Small device columns (phones to tablets) -@media (min-width: @screen-tablet) { +@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .container { max-width: @container-tablet; } -- cgit v1.2.3 From a2b9988eb908e5b95fb253aac7fde0fbd61c375e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 00:28:50 -0700 Subject: Media query (grid and responsive utilities) overhaul Grid classes have been changed to account for a fourth set of classes, meaning we now have XS, S, M, and L options. Specifically, we made the following changes: * Renames `.col-` to `.col-xs-` * Adds `.col-md-` for devices 992px wide and up * Remaps `.col-lg-` for devices 1200px wide and up Alongside that, we've updated our media queries to better handle advanced grid layouts: * All column classes now kick in when they hit a `min-width`, undoing the #9128 fix in https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb c690f3a65 * All column offsets, pushes, and pulls are scoped to an appropriate range, meaning a `min-width` and `max-width` (thanks for the idea, @eratzlaff) We've also modified the widths of our grid containers for the small device grid (now a max 720px instead of 728px) and large device grid (now a max 1140px instead of 1170px) to avoid horizontal scrollbar problems in Firefox (likely due to box-sizing, which is why we didn't see it in 2.x). Similarly, we've updated the responsive ultility classes to match the new four media query approach of the grid system. That means we've: * Added new `.visible-xs` and `.hidden-xs` classes * Reassigns visible and hidden classes for small, medium, and large to matching grid system media queries * Updates docs examples to match grid system and account for fourth utility range ----- Fixes the following: * #9135: fourth grid tier * #9302: undoes previous range change for small grid system, so no need to update any docs here * #8755: consistent grid and responsive utilities schemas) * #9195, #9216, and #9227: no more horizontal scrollbars --- less/grid.less | 196 ++++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 145 insertions(+), 51 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 5142feb65..f02bc7148 100644 --- a/less/grid.less +++ b/less/grid.less @@ -2,6 +2,7 @@ // Grid system // -------------------------------------------------- + // Set the container width, and override it for fixed navbars in media queries .container { .container-fixed(); @@ -13,18 +14,18 @@ } // Common styles for small and large grid columns -.col-1, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-10, -.col-11, -.col-12, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, @@ -37,6 +38,18 @@ .col-sm-10, .col-sm-11, .col-sm-12, +.col-md-1, +.col-md-2, +.col-md-3, +.col-md-4, +.col-md-5, +.col-md-6, +.col-md-7, +.col-md-8, +.col-md-9, +.col-md-10, +.col-md-11, +.col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, @@ -58,41 +71,45 @@ } - -// -// Container and grid column sizing +// Extra small grid // +// Grid classes for extra small devices like smartphones. No offset, push, or +// pull classes are present here due to the size of the target -// Extra small device columns (smartphones) -.col-1, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-10, -.col-11, -.col-12 { +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12 { float: left; } -.col-1 { width: percentage((1 / @grid-columns)); } -.col-2 { width: percentage((2 / @grid-columns)); } -.col-3 { width: percentage((3 / @grid-columns)); } -.col-4 { width: percentage((4 / @grid-columns)); } -.col-5 { width: percentage((5 / @grid-columns)); } -.col-6 { width: percentage((6 / @grid-columns)); } -.col-7 { width: percentage((7 / @grid-columns)); } -.col-8 { width: percentage((8 / @grid-columns)); } -.col-9 { width: percentage((9 / @grid-columns)); } -.col-10 { width: percentage((10/ @grid-columns)); } -.col-11 { width: percentage((11/ @grid-columns)); } -.col-12 { width: 100%; } - -// Small device columns (phones to tablets) -@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { +.col-xs-1 { width: percentage((1 / @grid-columns)); } +.col-xs-2 { width: percentage((2 / @grid-columns)); } +.col-xs-3 { width: percentage((3 / @grid-columns)); } +.col-xs-4 { width: percentage((4 / @grid-columns)); } +.col-xs-5 { width: percentage((5 / @grid-columns)); } +.col-xs-6 { width: percentage((6 / @grid-columns)); } +.col-xs-7 { width: percentage((7 / @grid-columns)); } +.col-xs-8 { width: percentage((8 / @grid-columns)); } +.col-xs-9 { width: percentage((9 / @grid-columns)); } +.col-xs-10 { width: percentage((10/ @grid-columns)); } +.col-xs-11 { width: percentage((11/ @grid-columns)); } +.col-xs-12 { width: 100%; } + + +// Small grid +// +// Columns, offsets, pushes, and pulls for the small device range, from phones +// to tablets. + +@media (min-width: @screen-tablet) { .container { max-width: @container-tablet; } @@ -123,7 +140,9 @@ .col-sm-10 { width: percentage((10/ @grid-columns)); } .col-sm-11 { width: percentage((11/ @grid-columns)); } .col-sm-12 { width: 100%; } +} +@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { // Push and pull columns for source order changes .col-sm-push-1 { left: percentage((1 / @grid-columns)); } .col-sm-push-2 { left: percentage((2 / @grid-columns)); } @@ -163,11 +182,93 @@ .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); } } -// Medium and large device columns (desktop and up) + +// Medium grid +// +// Columns, offsets, pushes, and pulls for the desktop device range. + @media (min-width: @screen-desktop) { .container { max-width: @container-desktop; } + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12 { + float: left; + } + .col-md-1 { width: percentage((1 / @grid-columns)); } + .col-md-2 { width: percentage((2 / @grid-columns)); } + .col-md-3 { width: percentage((3 / @grid-columns)); } + .col-md-4 { width: percentage((4 / @grid-columns)); } + .col-md-5 { width: percentage((5 / @grid-columns)); } + .col-md-6 { width: percentage((6 / @grid-columns)); } + .col-md-7 { width: percentage((7 / @grid-columns)); } + .col-md-8 { width: percentage((8 / @grid-columns)); } + .col-md-9 { width: percentage((9 / @grid-columns)); } + .col-md-10 { width: percentage((10/ @grid-columns)); } + .col-md-11 { width: percentage((11/ @grid-columns)); } + .col-md-12 { width: 100%; } +} + +@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + // Push and pull columns for source order changes + .col-md-push-1 { left: percentage((1 / @grid-columns)); } + .col-md-push-2 { left: percentage((2 / @grid-columns)); } + .col-md-push-3 { left: percentage((3 / @grid-columns)); } + .col-md-push-4 { left: percentage((4 / @grid-columns)); } + .col-md-push-5 { left: percentage((5 / @grid-columns)); } + .col-md-push-6 { left: percentage((6 / @grid-columns)); } + .col-md-push-7 { left: percentage((7 / @grid-columns)); } + .col-md-push-8 { left: percentage((8 / @grid-columns)); } + .col-md-push-9 { left: percentage((9 / @grid-columns)); } + .col-md-push-10 { left: percentage((10/ @grid-columns)); } + .col-md-push-11 { left: percentage((11/ @grid-columns)); } + + .col-md-pull-1 { right: percentage((1 / @grid-columns)); } + .col-md-pull-2 { right: percentage((2 / @grid-columns)); } + .col-md-pull-3 { right: percentage((3 / @grid-columns)); } + .col-md-pull-4 { right: percentage((4 / @grid-columns)); } + .col-md-pull-5 { right: percentage((5 / @grid-columns)); } + .col-md-pull-6 { right: percentage((6 / @grid-columns)); } + .col-md-pull-7 { right: percentage((7 / @grid-columns)); } + .col-md-pull-8 { right: percentage((8 / @grid-columns)); } + .col-md-pull-9 { right: percentage((9 / @grid-columns)); } + .col-md-pull-10 { right: percentage((10/ @grid-columns)); } + .col-md-pull-11 { right: percentage((11/ @grid-columns)); } + + // Offsets + .col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); } +} + + +// Large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. + +@media (min-width: @screen-large-desktop) { + .container { + max-width: @container-large-desktop; + } + .col-lg-1, .col-lg-2, .col-lg-3, @@ -233,10 +334,3 @@ .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); } .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); } } - -// Large desktops and up -@media (min-width: @screen-large-desktop) { - .container { - max-width: @container-large-desktop; - } -} -- cgit v1.2.3 From 394f6980567c0adcb80553e2b510abab588d4c53 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 15:02:09 -0700 Subject: undo the grid max-width boundary because it makes offsets kinda borked (you'd have to set twice, for medium and large, in most cases--and that sucks) --- less/grid.less | 4 ---- 1 file changed, 4 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index f02bc7148..f476a2b03 100644 --- a/less/grid.less +++ b/less/grid.less @@ -140,9 +140,7 @@ .col-sm-10 { width: percentage((10/ @grid-columns)); } .col-sm-11 { width: percentage((11/ @grid-columns)); } .col-sm-12 { width: 100%; } -} -@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { // Push and pull columns for source order changes .col-sm-push-1 { left: percentage((1 / @grid-columns)); } .col-sm-push-2 { left: percentage((2 / @grid-columns)); } @@ -217,9 +215,7 @@ .col-md-10 { width: percentage((10/ @grid-columns)); } .col-md-11 { width: percentage((11/ @grid-columns)); } .col-md-12 { width: 100%; } -} -@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { // Push and pull columns for source order changes .col-md-push-1 { left: percentage((1 / @grid-columns)); } .col-md-push-2 { left: percentage((2 / @grid-columns)); } -- cgit v1.2.3 From c558c035d7eee68276c76246260913663029f1dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 16:02:27 -0700 Subject: fixes #9258: no more float bug with full-width grid columns by removing float on all .col-*-12 classes --- less/grid.less | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index f476a2b03..c51aab9c7 100644 --- a/less/grid.less +++ b/less/grid.less @@ -74,7 +74,10 @@ // Extra small grid // // Grid classes for extra small devices like smartphones. No offset, push, or -// pull classes are present here due to the size of the target +// pull classes are present here due to the size of the target. +// +// Note that `.col-xs-12` doesn't get floated on purpose—there's no need since +// it's full-width. .col-xs-1, .col-xs-2, @@ -86,8 +89,7 @@ .col-xs-8, .col-xs-9, .col-xs-10, -.col-xs-11, -.col-xs-12 { +.col-xs-11 { float: left; } .col-xs-1 { width: percentage((1 / @grid-columns)); } @@ -108,6 +110,9 @@ // // Columns, offsets, pushes, and pulls for the small device range, from phones // to tablets. +// +// Note that `.col-sm-12` doesn't get floated on purpose—there's no need since +// it's full-width. @media (min-width: @screen-tablet) { .container { @@ -124,8 +129,7 @@ .col-sm-8, .col-sm-9, .col-sm-10, - .col-sm-11, - .col-sm-12 { + .col-sm-11 { float: left; } .col-sm-1 { width: percentage((1 / @grid-columns)); } @@ -184,6 +188,9 @@ // Medium grid // // Columns, offsets, pushes, and pulls for the desktop device range. +// +// Note that `.col-md-12` doesn't get floated on purpose—there's no need since +// it's full-width. @media (min-width: @screen-desktop) { .container { @@ -199,8 +206,7 @@ .col-md-8, .col-md-9, .col-md-10, - .col-md-11, - .col-md-12 { + .col-md-11 { float: left; } .col-md-1 { width: percentage((1 / @grid-columns)); } @@ -259,6 +265,9 @@ // Large grid // // Columns, offsets, pushes, and pulls for the large desktop device range. +// +// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since +// it's full-width. @media (min-width: @screen-large-desktop) { .container { @@ -275,8 +284,7 @@ .col-lg-8, .col-lg-9, .col-lg-10, - .col-lg-11, - .col-lg-12 { + .col-lg-11 { float: left; } .col-lg-1 { width: percentage((1 / @grid-columns)); } -- cgit v1.2.3 From b0a66e60c1ebf13e6bfdb9d844e9ca6d3cd88251 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 20:25:20 -0700 Subject: Fixes #9663: Add offset overrides for medium and large grid tiers --- less/grid.less | 2 ++ 1 file changed, 2 insertions(+) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index c51aab9c7..f38b26a48 100644 --- a/less/grid.less +++ b/less/grid.less @@ -248,6 +248,7 @@ .col-md-pull-11 { right: percentage((11/ @grid-columns)); } // Offsets + .col-md-offset-0 { margin-left: 0; } .col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); } .col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); } .col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); } @@ -326,6 +327,7 @@ .col-lg-pull-11 { right: percentage((11/ @grid-columns)); } // Offsets + .col-lg-offset-0 { margin-left: 0; } .col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); } .col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); } .col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); } -- cgit v1.2.3 From 111bdc4e93ffd61b08736e7ec87699dc4a8d3ca2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 20:31:11 -0700 Subject: fixes #9663: second part, reset pushes and pulls in md and lg grid tiers --- less/grid.less | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index f38b26a48..e3684e5ae 100644 --- a/less/grid.less +++ b/less/grid.less @@ -223,6 +223,7 @@ .col-md-12 { width: 100%; } // Push and pull columns for source order changes + .col-md-push-0 { left: auto; } .col-md-push-1 { left: percentage((1 / @grid-columns)); } .col-md-push-2 { left: percentage((2 / @grid-columns)); } .col-md-push-3 { left: percentage((3 / @grid-columns)); } @@ -235,6 +236,7 @@ .col-md-push-10 { left: percentage((10/ @grid-columns)); } .col-md-push-11 { left: percentage((11/ @grid-columns)); } + .col-md-pull-0 { right: auto; } .col-md-pull-1 { right: percentage((1 / @grid-columns)); } .col-md-pull-2 { right: percentage((2 / @grid-columns)); } .col-md-pull-3 { right: percentage((3 / @grid-columns)); } @@ -302,6 +304,7 @@ .col-lg-12 { width: 100%; } // Push and pull columns for source order changes + .col-lg-push-0 { left: auto; } .col-lg-push-1 { left: percentage((1 / @grid-columns)); } .col-lg-push-2 { left: percentage((2 / @grid-columns)); } .col-lg-push-3 { left: percentage((3 / @grid-columns)); } @@ -314,6 +317,7 @@ .col-lg-push-10 { left: percentage((10/ @grid-columns)); } .col-lg-push-11 { left: percentage((11/ @grid-columns)); } + .col-lg-pull-0 { right: auto; } .col-lg-pull-1 { right: percentage((1 / @grid-columns)); } .col-lg-pull-2 { right: percentage((2 / @grid-columns)); } .col-lg-pull-3 { right: percentage((3 / @grid-columns)); } -- cgit v1.2.3