mirror of
				https://github.com/twbs/bootstrap.git
				synced 2025-10-31 00:04:27 -04:00 
			
		
		
		
	
		
			
				
	
	
		
			76 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			76 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
| /// Grid system
 | |
| //
 | |
| // Generate semantic grid columns with these mixins.
 | |
| 
 | |
| @mixin make-container($gutter: $grid-gutter-width) {
 | |
|   margin-right: auto;
 | |
|   margin-left: auto;
 | |
|   padding-left:  ($gutter / 2);
 | |
|   padding-right: ($gutter / 2);
 | |
|   @include clearfix();
 | |
| }
 | |
| 
 | |
| 
 | |
| // For each breakpoint, define the maximum width of the container in a media query
 | |
| @mixin make-container-max-widths($max-widths: $container-max-widths) {
 | |
|   @each $breakpoint, $container-max-width in $max-widths {
 | |
|     @include media-breakpoint-up($breakpoint) {
 | |
|       max-width: $container-max-width;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| @mixin make-row($gutter: $grid-gutter-width) {
 | |
|   @if $enable-flex {
 | |
|     display: flex;
 | |
|     flex-wrap: wrap;
 | |
|   } @else {
 | |
|     @include clearfix();
 | |
|   }
 | |
|   margin-left:  ($gutter / -2);
 | |
|   margin-right: ($gutter / -2);
 | |
| }
 | |
| 
 | |
| @mixin make-col($gutter: $grid-gutter-width) {
 | |
|   position: relative;
 | |
|   @if $enable-flex {
 | |
|     // Do nothing
 | |
|   } @else {
 | |
|     float: left;
 | |
|   }
 | |
|   min-height: 1px;
 | |
|   padding-left:  ($gutter / 2);
 | |
|   padding-right: ($gutter / 2);
 | |
| }
 | |
| 
 | |
| @mixin make-col-span($size, $columns: $grid-columns) {
 | |
|   @if $enable-flex {
 | |
|     flex: 0 0 percentage($size / $columns);
 | |
|   } @else {
 | |
|     width: percentage($size / $columns);
 | |
|   }
 | |
| }
 | |
| 
 | |
| @mixin make-col-offset($size, $columns: $grid-columns) {
 | |
|   margin-left: percentage($size / $columns);
 | |
| }
 | |
| 
 | |
| @mixin make-col-push($size, $columns: $grid-columns) {
 | |
|   left: if($size > 0, percentage($size / $columns), auto);
 | |
| }
 | |
| 
 | |
| @mixin make-col-pull($size, $columns: $grid-columns) {
 | |
|   right: if($size > 0, percentage($size / $columns), auto);
 | |
| }
 | |
| 
 | |
| @mixin make-col-modifier($type, $size, $columns) {
 | |
|   // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
 | |
|   @if $type == push {
 | |
|     @include make-col-push($size, $columns);
 | |
|   } @else if $type == pull {
 | |
|     @include make-col-pull($size, $columns);
 | |
|   } @else if $type == offset {
 | |
|     @include make-col-offset($size, $columns);
 | |
|   }
 | |
| }
 |