自定义 Bootstrap 的装订线和列大小答案

【问题标题】：Customizing gutter and column sizes of Bootstrap自定义 Bootstrap 的装订线和列大小
【发布时间】：2017-04-28 01:08:22
【问题描述】：

我们的设计师在没有使用网格系统的情况下设计了网站，但幸运的是我找到了一个网格系统来适应它的一些设置。它仍然是 12 个网格，但装订线和列的大小与引导程序的不同。我想在这一点上问一些问题。

我要更改的设置是装订线大小和列大小。我知道如何使用引导程序，但我从未尝试过自定义它。我认为预先自定义引导程序会比对几乎每个元素都使用填充/边距更好，我认为这是复杂的适应响应能力。

计算它的正确方法是什么？例如在 Bootstrap 的官方定制器上，我应该更改哪些字段？我应该如何计算所有屏幕尺寸的尺寸？

他在设计时也使用了 1440 x 900。

调整以下网格设置的最佳方法是什么？在这里，我添加了适合设计的网格设置：

【问题讨论】：

“这是从 Bootstrap 的官方定制器定制 bootstrap 的好行为吗？” -- 当然，为什么不呢？这不就是为了这个吗？ “当您想要自定义并同时保持响应能力时，最好的方法是什么？” -- 我相信，但不要引用我的话，无论您更改什么设置，定制器都应该足够聪明以保持响应。
您能帮我更改哪些设置以使我的设置适应引导程序吗？我对如何进行计算感到非常困惑。
我认为您不必进行任何计算。定制器在编译 css 时会使用您的值自动计算所有内容。要更改装订线大小，您可以转到此处：getbootstrap.com/customize/#grid-system 并调整 @grid-gutter-width，它将根据该值为您计算其他所有内容。但是，列通常使用百分比作为宽度，所以我认为您不能使用固定大小。例如，12 列布局中的列将获得1/12 或8.333% 的宽度

【解决方案1】：

Bootstrap 有一组变量，您可以根据需要在项目中覆盖这些变量。 _variables.scss

最大宽度：$container-max-widths,
列数：$grid-columns,
和装订线尺寸：$grid-gutter-width-base.
此外，您可以为每个屏幕尺寸设置不同的装订线尺寸：$grid-gutter-widths。

你可以不用bootstrap的预编译css文件，而是使用它的scss版本，自己编译scss文件。

更新：

Ups，作者使用较少版本的 Bootstrap。所以你可以更改更少的变量：@gridColumns、@gridColumnWidth、@gridGutterWidth，等等。

【讨论】：