rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +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.
{% 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
// Small devices (landscape phones, 544px and up)
@media (min-width: 544px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@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*):
{% highlight scss %}
// Extra small devices (portrait phones, less than 544px)
@media (max-width: 543px) { ... }
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }
// Small devices (landscape phones, less than 768px)
@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:
{% highlight scss %}
// Extra small devices (portrait phones, less than 544px)
@media (max-width: 543px) { ... }
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }
// Small devices (landscape phones, 544px and up)
@media (min-width: 544px) and (max-width: 767px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }