如何在SASS CSS的Bootstrap 4中获得15列? [英] How to get 15 columns in Bootstrap 4 in SASS CSS?

问题描述

我的布局设计明显适用于1200px/15 cols框架，但是我的客户只想将Bootstrap 4与SASS一起使用.甚至有可能将Bootstrap转换为15列布局?我还没有在网上看到这样的例子.对于小项目，我不是Bootstrap的忠实拥护者.老实说，这是一个趋势，我不明白.对于5页的网站&来说可能太重了项目通常是根据内容完成的，而不是根据某些框架(无论是否由Twitter支持)完成的.

I have a layout design clearly made for 1200px / 15 cols framework, but my client wants to use Bootstrap 4 with SASS only. Is it even possible to transform Bootstrap into 15 cols layout? I haven't seen such an example online. I'm not a huge fan of Bootstrap for small projects. It is a trend I honestly don't understand. Might be too heavy for a 5 pages website & projects are usually done according to the content, not according to some framework, Twitter-backed or not.

但是，就是这样.

如果可以编写15个cols布局的代码，您能给我提示如何开始吗?进行这种修改需要多长时间?

If it would be possible to code a 15 cols layout, could you give me a hint on how to begin? And how long would it take to perform such an adaptation?

推荐答案

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

You can just recompile bootstrap 4 with the proper settings.

位于以下位置的文档: https://v4-alpha. getbootstrap.com/layout/grid/#customizing-the-grid 应当对此进行解释，但是由于它是一个临时链接，因此我将在此处包括它.

The documentation at: https://v4-alpha.getbootstrap.com/layout/grid/#customizing-the-grid should explain it, but since it is a temporary link I'll include it here.

首先，您应该能够将SASS构建到CSS中，但是总的来说，您只需要在包含要构建的引导文件之前设置变量的列数，或者修改variable.scss文件并更改$的值像这样的网格列值:

First you should be able to build the SASS into CSS, but overall you just have to set the variable for how many columns before including the bootstrap file to be built, or modify the variable.scss file and change the value of $grid-columns value like so:

$grid-columns:               15;

这是起点，您可能必须调整其他网格变量以控制每列之间的总宽度和装订线等.

That is the starting point, you may have to adjust other grid variables to control the total width and gutter between each column etc.

这篇关于如何在SASS CSS的Bootstrap 4中获得15列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！