kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Add maximum bounds variables for so our responsive utilities don't overlap

This commit is contained in:
Mark Otto 2013-04-27 11:55:45 -07:00
parent 9ce7f22e99
commit 2ffa0e4409
3 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/css/bootstrap.css vendored
View File

@ -5341,7 +5341,7 @@ a.list-group-item.active > .badge,
display: inherit !important; display: inherit !important;
} }
@media (min-width: 768px) and (max-width: 992px) { @media (min-width: 768px) and (max-width: 991px) {
.visible-phone { .visible-phone {
display: none !important; display: none !important;
} }

2
less/responsive-utilities.less
View File

@ -46,7 +46,7 @@
// Tablets & small desktops only // Tablets & small desktops only
@media (min-width: @screen-tablet) and (max-width: @screen-desktop) { @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.visible-phone { display: none !important; } .visible-phone { display: none !important; }
.visible-tablet { display: inherit !important; } .visible-tablet { display: inherit !important; }
.visible-desktop { display: none !important; } .visible-desktop { display: none !important; }

7
less/variables.less
View File

@ -375,12 +375,19 @@
// Tiny screen / phone // Tiny screen / phone
@screen-tiny: 480px; @screen-tiny: 480px;
@screen-phone: @screen-tiny; @screen-phone: @screen-tiny;
// Small screen / tablet // Small screen / tablet
@screen-small: 768px; @screen-small: 768px;
@screen-tablet: @screen-small; @screen-tablet: @screen-small;
// Medium screen / desktop // Medium screen / desktop
@screen-medium: 992px; @screen-medium: 992px;
@screen-desktop: @screen-medium; @screen-desktop: @screen-medium;
// So media queries don't overlap when required, provide a maximum
@screen-small-max: (@screen-medium - 1);
@screen-tablet-max: @screen-small-max;
// Large screen / wide desktop // Large screen / wide desktop
@screen-large: 1200px; @screen-large: 1200px;
@screen-large-desktop: @screen-large; @screen-large-desktop: @screen-large;