rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

grid-breakpoint fix

Browse Source 
grid-breakpoint for sm is 576px
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L186

current document shows 544px, but it should be 576px
This commit is contained in:
Fumito Mizuno 2016-11-26 15:47:40 +09:00 committed by GitHub
parent 990a901e52
commit 050ba7390c
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/layout/overview.md
View File

@ -57,11 +57,11 @@ Since Bootstrap is developed to be mobile first, we use a handful of [media quer
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
{% highlight scss %} {% highlight scss %}
// Extra small devices (portrait phones, less than 544px) // Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap // No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up) // Small devices (landscape phones, 576px and up)
@media (min-width: 544px) { ... } @media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up) // Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... } @media (min-width: 768px) { ... }
@ -93,8 +93,8 @@ Since we write our source CSS in Sass, all our media queries are available via S
We occasionally use media queries that go in the other direction (the given screen size *or smaller*): We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
{% highlight scss %} {% highlight scss %}
// Extra small devices (portrait phones, less than 544px) // Extra small devices (portrait phones, less than 576px)
@media (max-width: 543px) { ... } @media (max-width: 575px) { ... }
// Small devices (landscape phones, less than 768px) // Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... } @media (max-width: 767px) { ... }
@ -121,11 +121,11 @@ Once again, these media queries are also available via Sass mixins:
We also have media between the breakpoint's minimum and maximum widths for only the given screen size: We also have media between the breakpoint's minimum and maximum widths for only the given screen size:
{% highlight scss %} {% highlight scss %}
// Extra small devices (portrait phones, less than 544px) // Extra small devices (portrait phones, less than 576px)
@media (max-width: 543px) { ... } @media (max-width: 575px) { ... }
// Small devices (landscape phones, 544px and up) // Small devices (landscape phones, 576px and up)
@media (min-width: 544px) and (max-width: 767px) { ... } @media (min-width: 576px) and (max-width: 767px) { ... }
// Medium devices (tablets, 768px and up) // Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... } @media (min-width: 768px) and (max-width: 991px) { ... }