Question

有没有办法在每个断点中自定义网格装订线？

我知道，Twitter支付数百万美元使Bootstrap v4完美，我不想在一天内改革一切，但我只是好奇，那是有办法制作我的定制排水沟，而不仅仅是只有一个。

赞：我希望大尺寸的装订线为30px，但在较小的设备上我希望它是24px和移动20px

Answer 1

您可以像这样添加自定义装订线：

.row.custom-gutter {
  margin-left: 30px;
  margin-right: 30px;
}

[class^='col'].custom-gutter,
[class*=' col'].custom-gutter {
  padding-left: 30px;
  padding-right: 30px;
}

然后你必须使用媒体查询更新较小设备上的填充。

Answer 2

你需要继续你的文件夹/ node_modules / bootstrap / scss / _variables.scss 并搜索：

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:                  12 !default;
$grid-gutter-width-base:        30px !default;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
) !default;

您也可以更改断点：

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);

Answer 3

我刚刚制作了一个程序包，该程序包可以自定义每个断点的装订线和容器边距：https://github.com/BenceSzalai/bootstrap-responsive-grid

Bootstrap v4 Beta，定制排水沟

3 个答案: