rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
v4: Grid adjustments
This commit is contained in:
Mark Otto 2016-10-09 14:52:14 -07:00 committed by GitHub
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 class="text-xs-center">
Extra small<br>
<small>&lt;544px</small>
<small>&lt;576px</small>
</th>
<th class="text-xs-center">
Small<br>
<small>&ge;544px</small>
<small>&ge;576px</small>
</th>
<th class="text-xs-center">
Medium<br>
@ -93,9 +93,9 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
<tr>
<th class="text-nowrap" scope="row">Container width</th>
<td>None (auto)</td>
<td>576px</td>
<td>540px</td>
<td>720px</td>
<td>940px</td>
<td>960px</td>
<td>1140px</td>
</tr>
<tr>
@ -112,7 +112,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
</tr>
<tr>
<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>
<th class="text-nowrap" scope="row">Nestable</th>
@ -154,7 +154,7 @@ $grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 544px,
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
@ -164,9 +164,9 @@ $grid-breakpoints: (
);
$container-max-widths: (
sm: 576px,
sm: 540px,
md: 720px,
lg: 940px,
lg: 960px,
xl: 1140px
);
{% endhighlight %}
@ -512,7 +512,7 @@ $grid-breakpoints: (
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 940px
lg: 960px
);
{% endhighlight %}

6
scss/_variables.scss
View File

@ -125,7 +125,7 @@ $link-hover-decoration: underline !default;
$grid-breakpoints: (
xs: 0,
sm: 544px,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
@ -138,9 +138,9 @@ $grid-breakpoints: (
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 576px,
sm: 540px,
md: 720px,
lg: 940px,
lg: 960px,
xl: 1140px
) !default;
@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) {
@each $breakpoint, $container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
width: $container-max-width;
max-width: 100%;
}
}
}