web-dev-qa-db-ja.com

Bootstrap 4では、ブレークポイントに応じて内部の$ grid-Gutter-widthを変更する方法は？

私は現在、SCSSのBootstrap4に取り組んでいます。

内側の$ grid-Gutter-widthをスマートフォンでのみ変更したい。

_grid.scssによると

$grid-columns: 12 !default; $grid-Gutter-width: 30px !default;

bootstrapサイトでは、次のようになります：

グリッドサイズ、ミックスイン、変数が更新されました。グリッドの樋にSassマップが追加され、各ブレークポイントで特定の樋の幅を指定できるようになりました。

地図が見つかりません。どうすればよいのでしょうか。

twitter-bootstrapsassbootstrap-4gutter
13
Zorkzyd

これはドキュメントの間違いのようです。以前はマップがありましたが、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;
    }
}

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

1
Zim

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

1
Dmitry Zakharov

ブレークポイント全体のガターサイズの構成可能なマップ：

_ 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);
      }
    }
  }
}
0
Matt Stone