twitter-bootstrap - 在 Bootstrap 4 中,如何根据断点更改内部 $grid-gutter-width?

标签 twitter-bootstrap sass bootstrap-4 gutter

我目前正在 SCSS 中开发 Bootstrap4。

我只想更改智能手机上的内部 $grid-gutter-width 。

根据_grid.scss
$grid-columns: 12 !default; $grid-gutter-width: 30px !default;
在 Bootstrap 站点上,据说:

Updated grid sizes, mixins, and variables. Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.



我找不到 map 以及如何完成。

最佳答案

这看起来像是文档中的错误。曾经有一张 map ,但是it was removed在 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;
    }
}

https://www.codeply.com/go/XgynFzTmGv

关于twitter-bootstrap - 在 Bootstrap 4 中,如何根据断点更改内部 $grid-gutter-width?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49302891/

相关文章:

jquery - Bootstrap select destroy 从 DOM 中删除原始 select

javascript - Webpack - 在外部文件中导入 mixins/变量/函数

css - 基于 PX 的 REM 计算容器宽度不正确

css - Chrome - 在向 *ngFor View 添加元素时,始终向下滚动到最后一个元素

javascript - Bootstrap 日期时间选择器显示

ruby-on-rails - 部署到 heroku 时 rake 中止找不到文件 twitter/bootstrap

ruby-on-rails - 使用 bootstrap 和 rails 的多列

css - Bootstrap 中的 5 个等宽列(容器的全宽)

css - Bootstrap 4 按钮向右切换菜单项...?

html - 如何在 Bootstrap 的旋转木马顶部添加播放按钮?