如何在SASS CSS中的Bootstrap 4中获得15列?

时间:2017-01-06 19:49:01

标签: sass bootstrap-4 compass-sass twitter-bootstrap-4

我有一个明确针对1200px / 15 cols框架的布局设计,但我的客户想要仅使用带SASS的Bootstrap 4。是否甚至可以将Bootstrap转换为15 cols布局?我还没有在网上看过这样的例子。对于小型项目,我不是Bootstrap的忠实粉丝。老实说,这是一个不明白的趋势。可能对于一个5页的网站来说太沉重了。项目通常是根据内容完成的,而不是根据某些框架,Twitter支持与否。

但是,就是这样。

如果可以编写15个cols布局,你能给我一个如何开始的提示吗?进行这样的改编需要多长时间?

2 个答案:

答案 0 :(得分:3)

您可以使用正确的设置重新编译bootstrap 4.

https://v4-alpha.getbootstrap.com/layout/grid/#customizing-the-grid上的文档应该解释它,但由于它是一个临时链接,我将在此处包含它。

首先,您应该能够将SASS构建到CSS中,但总体而言,您只需要在包含要构建的引导程序文件之前设置变量数量,或者修改variable.scss文件并更改$的值grid-columns值如下:

$grid-columns:               15;

这是起点,您可能需要调整其他网格变量来控制每个列之间的总宽度和沟槽等。

答案 1 :(得分:1)

您只需使用SASS更改$grid-columns变量。

$grid-columns: 15;

您可能还想查看其他变量,例如$grid-gutter-width,以减少列之间的间距,因为您要使用更多列。

Working Demo

另见
creating custom grid number for bootstrap - Bootstrap