Question

客户已经处理了针对自定义网格的非常具体的措施，而不是100％确定如何处理它。以下是措施：

**Width: 320px** 
Sides: (26px) (2 sides)
Column:  (52px) (4 columns)
Gutter:  (20px) (3 gutters)

**Width: 768px**
Sides: (76px)  (2 sides)
Column:  (33px) (12 columns)
Gutter:  (20px) (11 gutters)

**Width: 1024px** 
Sides: (72px)  (2 sides)
Column:  (55px) (12 columns)
Gutter:  (20px) (11 gutters)

**Width: 1280px**
Sides: (74px)  (2 sides)
Column:  (76px) (12 columns)
Gutter:  (20px) (11 gutters)

我一直在搜索，发现Bootstrap 4有自定义网格的选项：

https://v4-alpha.getbootstrap.com/layout/grid/#columns-and-gutters

我看到我可以自定义装订线：

$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
)

也是宽度：

$grid-breakpoints: (
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

我没有看到自定义列的方法，任何想法？

Answer 1

您可以通过更改$grid-columns值来更改Bootstrap中的列数。但是，你不需要改变它。

我们假设您保留默认值col-3。为了在较小的屏幕上有4列，只需使用.col-md-1 4次。你仍然得到3＆＃34;排水沟＆＃34;在这些列之间。对于较大的屏幕，您可以使用.col-3 12次，并获得12列。这是在Bootstrap中实现它的方法。

您无法在Bootstrap中为不同的屏幕尺寸设置不同数量的列。例如，col-md-12（最多3列）和select REPLACE(TRANSLATE([Col], 'abcdefghijklmnopqrstuvwxyz+()- ,#+', '@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@'), '@', '')（最多12列）都不可能覆盖行宽的100％。

自定义网格，如何调整bootstrap呢？

1 个答案: