Question

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

大/ col-lg（＆gt; = 1200px宽度）
Medium / col-md（992px - 1199px）
小/ col-sm（768px - 991px）
Extra Small / col-xs（＆lt; 768px）

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

我宁愿针对以下4种不同的决议：

ExtraLarge（＆gt; = 1600px宽度）
大（1200px - 1599px）
SmallMedium（600 - 1199px）
MobileSmall（＆lt; = 599px）

因此，我不仅要添加一个额外的大集，还要更改/替换中小型和小型的。

有没有人遇到过类似的问题？我想使用网格生成器，我输入自定义网格宽度并输出CSS代码。

Answer 1

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

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

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

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

Answer 2

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

@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)
}

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

2 个答案: