我目前正在 SCSS 中开发 Bootstrap4。
我只想在智能手机上更改内部 $grid-gutter-width。
根据_grid.scss
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
在引导站点上，它是这样说的：
更新了网格大小、mixin 和变量。网格排水沟现在有一个 Sass 映射，因此您可以在每个断点指定特定的排水沟宽度。
我找不到地图以及如何完成。
【问题讨论】：
标签： twitter-bootstrap sass bootstrap-4 gutter
我刚刚制作了一个包，允许自定义每个断点的排水沟和容器边距：https://github.com/BenceSzalai/bootstrap-responsive-grid
对于那些对纯 SCSS 解决方案感兴趣的人来说，这可能是一种有效的方式，因为它首先改变了 Bootstrap CSS 的生成方式，而不是在已经生成的 CSS 之后添加覆盖。它非常适合在构建链中使用，例如使用 Webpack 从 npm 包编译 css。
【讨论】：
与 Arajay 的回答相同，但具有一些自动化功能，可以为每个断点选择特定的装订线宽度：
/* Specify your own gutters for every breakpoint. I use media-breakpoint-up so to avoid a default width it's better to always include "xs", and then you can do whatever you want */
$grid-gutter-widths: (
xs: 10px,
/* "sm" takes the same width as "xs" automatically */
md: 20px,
lg: 30px
);
/* You don't need to change anything below */
@each $grid-breakpoint, $grid-gutter-width in $grid-gutter-widths {
@include media-breakpoint-up($grid-breakpoint) {
$grid-gutter-half-width: $grid-gutter-width / 2;
.row:not(.no-gutters) {
margin-right: -$grid-gutter-half-width;
margin-left: -$grid-gutter-half-width;
}
.row:not(.no-gutters) > .col,
.row:not(.no-gutters) > [class*="col-"] {
padding-right: $grid-gutter-half-width;
padding-left: $grid-gutter-half-width;
}
}
}
我建议之后调整 $container-max-widths，因为它有可能会改变原始宽度。
UPD：我用解决方案做了一个小的 npm 包。你也可以在那里找到一个非常详细的文档：https://github.com/DZakh/Custom-gutters-bootstrap-plugin
【讨论】：
与 Zim 的答案相同，但使用行修复并使用 $grid-gutter-width 变量。如果你使用预处理器，效果会好 10%。
更新：我添加了更多样式以保留之前被破坏的 .no-gutters 的功能。
// HALF GUTTER WIDTH ON XS
@media (max-width: map-get($grid-breakpoints, sm)){
.row:not(.no-gutters) {
margin-right: -$grid-gutter-width / 4;
margin-left: -$grid-gutter-width / 4;
}
.row:not(.no-gutters) > .col,
.row:not(.no-gutters) > [class*="col-"] {
padding-right: $grid-gutter-width / 4;
padding-left: $grid-gutter-width / 4;
}
}
【讨论】：
Bootstrap documentation 打算完成此操作的方式是在 $grid-gutter-width 变量上设置最小装订线宽度大小，然后一直使用边距/填充辅助类来处理更大的断点（移动优先）。
<div class="row mx-md-n5">
<div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>
在示例中，他们在行上设置负 x 边距，然后在每列上设置相同数量的 x 填充。如果您为每个断点设置不同的宽度，这将变得相当冗长且难以阅读。我建议使用上面的替代答案。
【讨论】：
可配置的跨断点间距大小图：
_settings.scss
// Grid columns
// Custom map of gutter widths across breakpoints.
$grid-gutter-widths: (
xs: 16px,
md: 20px,
);
// Default Bootstrap gutter width variable.
$grid-gutter-width: map-get($grid-gutter-widths, md);
styles.scss
@import './settings';
@import 'node_modules/bootstrap/scss/bootstrap';
.container {
@each $breakpoint, $gutter in $grid-gutter-widths {
@include media-breakpoint-up($breakpoint) {
@include make-container($gutter);
}
}
}
.row {
@each $breakpoint, $gutter in $grid-gutter-widths {
@include media-breakpoint-up($breakpoint) {
@include make-row($gutter);
}
}
.row > .col,
.row > [class*='col-'] {
@each $breakpoint, $gutter in $grid-gutter-widths {
@include media-breakpoint-up($breakpoint) {
@include make-col-ready($gutter);
}
}
}
}
【讨论】：
这看起来像是文档中的一个错误。以前有地图，但是it was removed在4.0.0发布之前。但是，使用 SASS 只为 xs 添加它是相当容易的。例如移动设备上的 5px...
@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)){
.row > .col,
.row > [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
}
【讨论】：