相关:仅对页面的某个部分(div)定义不同数量的Bootstrap 4列? fellow devs,I'm trying to get 12 columns and 24 gutter size on large size, while 6 columns and 18 gutters when it's medium and lower on one container view, while another container view it would be 15 columns and 12 gutters on the large size while resizing accordingly on lower views??This is what I can achieve on the former (12 col 24 gutters, 6 columns 18 gutters):background-grid {@include make-row();@include make-col-ready;@each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { //@include make-col(map-get($dani-number-col, $breakpoint )); .row.no-gutters { margin-right: map-get($dani-row-no-gutters, $breakpoint ); margin-left: map-get($dani-row-no-gutters, $breakpoint ); } .row > .col, .row > [class*="col-"] { margin-right: map-get($dani-gutters, $breakpoint ); margin-left: map-get($dani-gutters , $breakpoint ); } }}}while I tried to do another container class to act for another view (15 columns, 6 gutters), I can't get my head around it. Mainly because my CSS and SASS understanding might be sparse, tried googling it but it seems there's no proper tutorial?.foreground-container {width: 1428px;@include make-foreground-container();@each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { //@include make-col(map-get($dani-number-col, $breakpoint )); // @include make-col(15); .foreground-row { margin-right: map-get($dani-row-no-gutters, $breakpoint ); margin-left: map-get($dani-row-no-gutters, $breakpoint ); } .foreground-row > .foreground-col, .foreground-row > [class*="foreground-col"] { margin-right: map-get($dani-row-no-gutters, $breakpoint ); margin-left: map-get($dani-row-no-gutters, $breakpoint ); } }}}.foreground-row { @include make-foreground-row(); // @include make-col(12);}.foreground-col { @include make-col-ready(); @include make-col(15);}for HTML,css<div class="background-container"> <div class="container"> <div class="row"> <div class="col">col1</div> <div class="col">col2</div> <div class="col">col3</div> </div> </div></div><div class="foreground-container"> <div class="container"> <div class="row"> <div class="col">col1</div> <div class="col">col2</div> <div class="col">col3</div> </div> </div></div>Is this even possible? If so how and if not what a good way to achieve what i intended to achieve? Thanks. 解决方案 You can make a custom mixin to regenerate the appropriate breakpoint columns inside the custom container...@mixin make-grid-columns-custom($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints); // only override lg and up @include media-breakpoint-up('lg', $breakpoints) { @for $i from 1 through $columns { .col#{$infix}-#{$i} { padding-right: ($gutter / 2); padding-left: ($gutter / 2); @include make-col($i, $columns); } } } }}@import "bootstrap";$foreground-container-max-widths: ( sm: 600px, md: 800px, lg: 1000px, xl: 1428px);/* make the container for the custom grid */.foreground-container > .container { @include make-container(); @include make-container-max-widths($foreground-container-max-widths, $grid-breakpoints);}.foreground-container { /* custom col for all breakpoints */ @include make-grid-columns(6, 3px, $grid-breakpoints); /* override lg and up using custom mixin */ @include make-grid-columns-custom(15, 6px, $grid-breakpoints);}Demo: https://www.codeply.com/go/SLmHas8zEZRelated: Define different number of Bootstrap 4 columns for some part (div) of page only? 这篇关于如何使用SASS为不同的网格列和断点自定义Bootstrap 4?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
10-23 03:57