twitter-bootstrap 在 Bootstrap 4 中，如何根据断点更改内部 $grid-gutter-width？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49302891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In Bootstrap 4, how to change inner $grid-gutter-width depending to breakpoints?
提问by Zorkzyd
I'm currently working on Bootstrap4 in SCSS.
我目前正在 SCSS 中使用 Bootstrap4。
I want to change the inner $grid-gutter-width on smartphone only.
我只想更改智能手机上的内部 $grid-gutter-width。
According to _grid.scss
根据_grid.scss
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
On the bootstrap site, it is sait that :
在引导站点上，它说：
Updated grid sizes, mixins, and variables. Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.
更新了网格大小、mixin 和变量。网格装订线现在有一个 Sass 贴图，因此您可以在每个断点处指定特定的装订线宽度。
I can't find the map and how it can be done.
我找不到地图以及如何完成。
采纳答案by Zim
This looks like a mistake in the docs. There used to be a map, but it was removedbefore 4.0.0 was released. However, it would be fairly easy to add this for just xswith SASS. For example 5px on mobile...
这看起来像是文档中的错误。曾经有一个地图，但在 4.0.0 发布之前它被删除了。但是，仅xs使用 SASS添加它是相当容易的。例如移动设备上的 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;
}
}
回答by Arajay
Same as Zim's answer but with the row fix and using the $grid-gutter-width variable. 10% nicer if you are using a preprocessor.
与 Zim 的答案相同，但行修复并使用 $grid-gutter-width 变量。如果您使用预处理器，效果会好 10%。
UPDATE: I added more styling to preserve the functionality of .no-gutters, which was broken before.
更新：我添加了更多样式以保留.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;
}
}
回答by Arajay
The way Bootstrap documentationintends for this to be done is by setting your minimum gutter width size on the $grid-gutter-widthvariable and then using the margin/padding helper classes all the way up for larger breakpoints (mobile first).
的方式引导文档打算用于此做是通过在设定的最小装订线宽度尺寸$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>
In the example they are setting a negative x margin on the row, then setting the same amount of x padding on each column. This will get fairly verbose and difficult to read if you are setting a different width for every breakpoint. I recommend using my alternate answer above.
在示例中，他们在行上设置负 x 边距，然后在每列上设置相同数量的 x 填充。如果您为每个断点设置不同的宽度，这将变得相当冗长且难以阅读。我建议使用上面的替代答案。
回答by Dmitry Zakharov
Same as Arajay's answer but with some automation that gives a possibility to choose a specific gutter width for every breakpoint:
与 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;
}
}
}
I'd recommend to adjust $container-max-widths afterwards, because there is a chance, that it may change original width a bit.
我建议之后调整 $container-max-widths ，因为有可能它可能会稍微改变原始宽度。
UPD: I've done a small npm package with the solution. Also you can find a pretty detailed doc there: https://github.com/DZakh/Custom-gutters-bootstrap-plugin
UPD：我已经用解决方案做了一个小的 npm 包。你也可以在那里找到一个非常详细的文档：https: //github.com/DZakh/Custom-gutters-bootstrap-plugin
回答by Matt Stone
Configurable map of gutter sizes across breakpoints:
跨断点的可配置装订线尺寸图：
_settings.scss
_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
样式.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);
}
}
}
}
回答by SystemF
The last answer of Matt Stone works great for me, but there is a little error in it. Just replace .row > .colto just > .colbecause of the nesting within .row.
Matt Stone 的最后一个答案对我很有用，但其中有一个小错误。.row > .col只是> .col因为 .row 中的嵌套而替换为。
