Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Bootstrap 5 grid#28517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
MartijnCuppens merged 10 commits intomasterfrommaster-mc-simplify-grid
Mar 10, 2020
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletionsbundlesize.config.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,11 +2,11 @@
"files": [
{
"path": "./dist/css/bootstrap-grid.css",
"maxSize": "6.5 kB"
"maxSize": "7.1 kB"
},
{
"path": "./dist/css/bootstrap-grid.min.css",
"maxSize": "6 kB"
"maxSize": "6.4 kB"
},
{
"path": "./dist/css/bootstrap-reboot.css",
Expand Down
24 changes: 0 additions & 24 deletionsscss/_card.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -150,30 +150,6 @@
}


// Card deck

.card-deck {
.card {
margin-bottom: $card-deck-margin;
}

@include media-breakpoint-up(sm) {
display: flex;
flex-flow: row wrap;
margin-right: -$card-deck-margin;
margin-left: -$card-deck-margin;

.card {
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
flex: 1 0 0%;
margin-right: $card-deck-margin;
margin-bottom: 0; // Override the default
margin-left: $card-deck-margin;
}
}
}


//
// Card groups
//
Expand Down
1 change: 0 additions & 1 deletionscss/_forms.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,5 @@
@import"forms/form-check";
@import"forms/form-file";
@import"forms/form-range";
@import"forms/layout";
@import"forms/input-group";
@import"forms/validation";
44 changes: 35 additions & 9 deletionsscss/_grid.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,18 +5,44 @@
@if $enable-grid-classes {
.row {
@include make-row();

> * {
@include make-col-ready();
}
}
}

// Gutters
//
// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.

@if $enable-grid-classes {
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

@include media-breakpoint-up($breakpoint, $grid-breakpoints) {

@each $key, $value in $gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
margin-right: -$value / 2;
margin-left: -$value / 2;

> * {
padding-right: $value / 2;
padding-left: $value / 2;
}
}

// Remove the negative margin from default .row, then the horizontal padding
// from all immediate children columns (to prevent runaway style inheritance).
.no-gutters {
margin-right: 0;
margin-left: 0;
.g#{$infix}-#{$key},
.gy#{$infix}-#{$key} {
margin-top: -$value;

> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
> * {
margin-top: $value;
}
}
}
}
}
}
Expand Down
10 changes: 3 additions & 7 deletionsscss/_variables.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -301,13 +301,14 @@ $container-max-widths: (
// Set the number of columns and specify the width of the gutters.

$grid-columns: 12 !default;
$grid-gutter-width:30px !default;
$grid-gutter-width:1.5rem !default;
$grid-row-columns: 6 !default;

$gutters: $spacers !default;

// Container padding

$container-padding-x:$grid-gutter-width / 2 !default;
$container-padding-x:1rem !default;


// Components
Expand DownExpand Up@@ -659,10 +660,6 @@ $form-text-margin-top: .25rem !default;

$form-check-inline-margin-right: 1rem !default;

$form-check-input-margin-x: .25rem !default;

$form-grid-gutter-width: 10px !default;

$input-group-addon-color: $input-color !default;
$input-group-addon-bg: $gray-200 !default;
$input-group-addon-border-color: $input-border-color !default;
Expand DownExpand Up@@ -932,7 +929,6 @@ $card-bg: $white !default;
$card-img-overlay-padding: 1.25rem !default;

$card-group-margin: $grid-gutter-width / 2 !default;
$card-deck-margin: $card-group-margin !default;


// Tooltips
Expand Down
11 changes: 2 additions & 9 deletionsscss/bootstrap-grid.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,19 +5,12 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/

html {
box-sizing: border-box;
}

*,
*::before,
*::after {
box-sizing: inherit;
}
$include-column-box-sizing: true !default;

@import "functions";
@import "variables";

@import "mixins/lists";
@import "mixins/breakpoints";
@import "mixins/container";
@import "mixins/grid";
Expand Down
80 changes: 0 additions & 80 deletionsscss/forms/_layout.scss
View file
Open in desktop

This file was deleted.

46 changes: 14 additions & 32 deletionsscss/mixins/_grid.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,27 +10,26 @@
}

@mixinmake-col-ready($gutter:$grid-gutter-width) {
position:relative;
// Add box sizing if only the grid is loaded
box-sizing:if(variable-exists(include-column-box-sizing)and$include-column-box-sizing,border-box,null);
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because weuse `flex` values
// always setting `width: 100%;`. This works because weset the width
// later on to override this initial width.
flex-shrink:0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Hi all: while I understand the rational for droppingposition: relative, can you comment on why you addedflex-shrink: 0? If would be great if you could respond to the following discussion thread. Thanks!

width:100%;
max-width:100%;// Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
padding-right:$gutter/2;
padding-left:$gutter/2;
}

@mixinmake-col($size,$columns:$grid-columns) {
flex:00percentage($size/$columns);
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width:percentage($size/$columns);
flex:00auto;
width:percentage($size/$columns);
}

@mixinmake-col-auto() {
flex:00auto;
width:auto;
max-width:100%;// Reset earlier grid tiers
}

@mixinmake-col-offset($size,$columns:$grid-columns) {
Expand All@@ -45,8 +44,8 @@
// style grid.
@mixinrow-cols($count) {
& >* {
flex:00100%/$count;
max-width:100%/$count;
flex:00auto;
width:100%/$count;
}
}

Expand All@@ -56,35 +55,18 @@
// any value of `$grid-columns`.

@mixinmake-grid-columns($columns:$grid-columns,$gutter:$grid-gutter-width,$breakpoints:$grid-breakpoints) {
// Common properties for all breakpoints
%grid-column {
position:relative;
width:100%;
padding-right:$gutter/2;
padding-left:$gutter/2;
}

@each$breakpointinmap-keys($breakpoints) {
$infix:breakpoint-infix($breakpoint,$breakpoints);

// Allow columns to stretch full width below their breakpoints
@for$ifrom1through$columns {
.col#{$infix}-#{$i} {
@extend%grid-column;
}
}
.col#{$infix},
.col#{$infix}-auto {
@extend%grid-column;
}

@includemedia-breakpoint-up($breakpoint,$breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix} {
flex-basis:0;
flex-grow:1;
flex:100%;// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
min-width:0;// See https://github.com/twbs/bootstrap/issues/25410
max-width:100%;
}

.row-cols#{$infix}-auto >* {
@includemake-col-auto();
}

@for$ifrom1through$grid-row-columns {
Expand Down
4 changes: 2 additions & 2 deletionssite/assets/scss/_component-examples.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,8 +10,8 @@
> [class^="col-"] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
background-color: rgba(39, 41, 43, .03);
border: 1px solid rgba(39, 41, 43, .1);
}
}

Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp