root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #20865 from twbs/v4-container-widths 

v4: Grid adjustments
This commit is contained in:
Mark Otto 2016-10-09 14:52:14 -07:00 committed by GitHub
parent f49a7a2a08 13cc81c50c
commit b6fe0d45a4
3 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/layout/grid.md
View File

@ -64,11 +64,11 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
<th></th> <th></th>
<th class="text-xs-center"> <th class="text-xs-center">
Extra small<br> Extra small<br>
<small>&lt;544px</small> <small>&lt;576px</small>
</th> </th>
<th class="text-xs-center"> <th class="text-xs-center">
Small<br> Small<br>
<small>&ge;544px</small> <small>&ge;576px</small>
</th> </th>
<th class="text-xs-center"> <th class="text-xs-center">
Medium<br> Medium<br>
@ -93,9 +93,9 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
<tr> <tr>
<th class="text-nowrap" scope="row">Container width</th> <th class="text-nowrap" scope="row">Container width</th>
<td>None (auto)</td> <td>None (auto)</td>
<td>576px</td> <td>540px</td>
<td>720px</td> <td>720px</td>
<td>940px</td> <td>960px</td>
<td>1140px</td> <td>1140px</td>
</tr> </tr>
<tr> <tr>
@ -112,7 +112,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
</tr> </tr>
<tr> <tr>
<th class="text-nowrap" scope="row">Gutter width</th> <th class="text-nowrap" scope="row">Gutter width</th>
<td colspan="5">1.875rem / 30px (15px on each side of a column)</td> <td colspan="5">30px (15px on each side of a column)</td>
</tr> </tr>
<tr> <tr>
<th class="text-nowrap" scope="row">Nestable</th> <th class="text-nowrap" scope="row">Nestable</th>
@ -154,7 +154,7 @@ $grid-breakpoints: (
// Extra small screen / phone // Extra small screen / phone
xs: 0, xs: 0,
// Small screen / phone // Small screen / phone
sm: 544px, sm: 576px,
// Medium screen / tablet // Medium screen / tablet
md: 768px, md: 768px,
// Large screen / desktop // Large screen / desktop
@ -164,9 +164,9 @@ $grid-breakpoints: (
); );
$container-max-widths: ( $container-max-widths: (
sm: 576px, sm: 540px,
md: 720px, md: 720px,
lg: 940px, lg: 960px,
xl: 1140px xl: 1140px
); );
{% endhighlight %} {% endhighlight %}
@ -512,7 +512,7 @@ $grid-breakpoints: (
$container-max-widths: ( $container-max-widths: (
sm: 420px, sm: 420px,
md: 720px, md: 720px,
lg: 940px lg: 960px
); );
{% endhighlight %} {% endhighlight %}

6
scss/_variables.scss
View File

@ -125,7 +125,7 @@ $link-hover-decoration: underline !default;
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
sm: 544px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 992px,
xl: 1200px xl: 1200px
@ -138,9 +138,9 @@ $grid-breakpoints: (
// Define the maximum width of `.container` for different screen sizes. // Define the maximum width of `.container` for different screen sizes.
$container-max-widths: ( $container-max-widths: (
sm: 576px, sm: 540px,
md: 720px, md: 720px,
lg: 940px, lg: 960px,
xl: 1140px xl: 1140px
) !default; ) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths"); @include _assert-ascending($container-max-widths, "$container-max-widths");

3
scss/mixins/_grid.scss
View File

@ -17,7 +17,8 @@
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
@each $breakpoint, $container-max-width in $max-widths { @each $breakpoint, $container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint, $breakpoints) { @include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width; width: $container-max-width;
max-width: 100%;
} }
} }
} }