创建自定义网格系统宽度定义的列宽

Question

bootstrap 3 网格系统针对 4 种不同的屏幕分辨率，具体取决于它们的宽度：

• 大/col-lg（>= 1200px 宽度）
• 中/col-md (992px - 1199px)
• 小/col-sm (768px - 991px)
• 特小/col-xs (<768px)

我发现这些分辨率并不代表我的webapp的用户群。例如，我的用户群中只有不到 5% 的用户使用中型和小型组合（这意味着我的用户中只有不到 5% 的屏幕分辨率宽度为 768px 到 1199px）。

我宁愿针对以下 4 种不同的分辨率：

• 特大号（>= 1600 像素宽度）
• 大 (1200px - 1599px)
• 小中 (600 - 1199px)
• MobileSmall (<= 599px)

所以我不仅喜欢加特大套，还喜欢改/换中小套和特小套

有人运行遇到过类似的问题吗？我很想使用网格生成器，在其中输入自定义网格宽度并获取 CSS 代码。

Answer 1

您几乎可以使用官方网站的自定义部分自定义 Bootstrap 的每个方面。

http://getbootstrap.com/customize/#grid-system

link 将您直接带到网格系统项目。

输入您的值，然后下载 Bootstrap 的自定义版本。甚至包括一个包含您的设置的 JSON 文件，以便您稍后可以重新导入它们并进行调整。

Answer 2

这适用于 Bootstrap 4 位用户，他们正在使用 SCSS 并且喜欢使用 bootstrap 混入和变量创建自己的网格系统。

@import '../../../bower_components/bootstrap/scss/variables';
@import '../../../bower_components/bootstrap/scss/mixins';

// Create custom variables to supply it for bootstrap's mixins
$grid-gutter-width-10: 10px;
$grid-gutter-widths-10: (
  xs: $grid-gutter-width-10,
  sm: $grid-gutter-width-10,
  md: $grid-gutter-width-10,
  lg: $grid-gutter-width-10,
  xl: $grid-gutter-width-10
);

.row-xs {
  @include make-row($gutters: $grid-gutter-widths-10);
  @include make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths-10, $breakpoints: $grid-breakpoints)
}