如何使用SASS为不同的网格列和断点自定义Bootstrap 4? [英] How to customize Bootstrap 4 using SASS for different grid columns and breakpoints?
问题描述
资深开发者，
我试图在大型容器上获得12列和24个装订线的尺寸，而在一个容器视图中处于中低位置时，将获得6列和18装订线的尺寸，而在另一个容器视图上，大型容器上将有15列和12装订线的尺寸尺寸，同时在较低的视图上调整大小?
这是我可以在前者上实现的功能(12列24条装订线，6列18条装订线):
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 );
}
}
}
}
当我尝试做另一个容器类来代表另一个视图(15列，6个装订线)时，我无法理解.主要是因为我对CSS和SASS的理解可能很少，因此尝试使用Google搜索，但似乎没有适当的教程吗?
.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);
}
对于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>
这甚至有可能吗?如果是这样，如何以及是否不是实现我打算实现的目标的一种好方法?
谢谢.
您可以进行自定义混合，以重新生成自定义容器内的相应断点列...
@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);
}
演示: https://www.codeply.com/go/SLmHas8zEZ
相关: } 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? } for HTML,css 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... Demo: https://www.codeply.com/go/SLmHas8zEZ Related: Define different number of Bootstrap 4 columns for some part (div) of page only? 这篇关于如何使用SASS为不同的网格列和断点自定义Bootstrap 4?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！.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);
}
<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>
@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);
}
