mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-20 17:54:23 +01:00
Merge pull request #20865 from twbs/v4-container-widths
v4: Grid adjustments
This commit is contained in:
commit
b6fe0d45a4
@ -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><544px</small>
|
||||
<small><576px</small>
|
||||
</th>
|
||||
<th class="text-xs-center">
|
||||
Small<br>
|
||||
<small>≥544px</small>
|
||||
<small>≥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 %}
|
||||
|
||||
|
@ -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");
|
||||
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user