mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 08:39:56 +02:00
Code Issues Releases Wiki Activity

flip things around again, no more base class, try out some new stuff to keep responsive flex grid working

Browse Source
This commit is contained in:
Mark Otto
2016-02-06 10:51:59 -08:00
parent 94999c98cf
commit 414997baa8
15 changed files with 216 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
scss/_grid.scss
View File

@@ -36,16 +36,16 @@
// Common styles for small and large grid columns
@if $enable-grid-classes {
.col {
[class^="col"] {
position: relative;
min-height: 1px;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
// Allow `.col` to use an automatic, even width when flex mode is enabled
@if $enable-flex {
flex: 1;
}
//
// // Allow `.col` to use an automatic, even width when flex mode is enabled
// @if $enable-flex {
// flex: 1;
// }
}
@include make-grid-columns();

18
scss/mixins/_grid-framework.scss
View File

@@ -9,14 +9,22 @@
$breakpoint-counter: ($breakpoint-counter + 1);
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
%grid-column-float-#{$breakpoint} {
float: left;
// %grid-column-float-#{$breakpoint} {
// float: left;
// }
@if $enable-flex {
.col-#{$breakpoint} {
@include make-col($gutter);
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
}
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@if not $enable-flex {
@extend %grid-column-float-#{$breakpoint};
}
// @if not $enable-flex {
// @extend %grid-column-float-#{$breakpoint};
// }
@include make-col-span($i, $columns);
}
}

19
scss/mixins/_grid.scss
View File

@@ -35,17 +35,25 @@
@mixin make-col($gutter: $grid-gutter-width) {
position: relative;
@if $enable-flex {
flex: 1;
} @else {
float: left;
}
// @if $enable-flex {
// flex: 1;
// } @else {
// float: left;
// }
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
}
@mixin make-col-span($size, $columns: $grid-columns) {
position: relative;
@if $enable-flex {
flex: 0 0 auto;
}
min-height: 1px;
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
@if $enable-flex {
flex: 0 0 percentage($size / $columns);
// Add a `max-width` to ensure content within each column does not blow out
@@ -53,6 +61,7 @@
// do not appear to require this.
max-width: percentage($size / $columns);
} @else {
float: left;
width: percentage($size / $columns);
}
}