How to get 15 columns in Bootstrap 4 in SASS CSS?

旧城冷巷雨未停 提交于 2019-12-10 22:54:44

问题


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.

But, this is it.

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?


回答1:


You can just recompile bootstrap 4 with the proper settings.

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.

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.




回答2:


You just need to change the $grid-columns variable using SASS.

$grid-columns: 15;

You may also want to check out other variables like $grid-gutter-width to decrease the spacing between columns since you're using more columns.

Working Demo


Also see:
creating custom grid number for bootstrap - Bootstrap



来源:https://stackoverflow.com/questions/41513247/how-to-get-15-columns-in-bootstrap-4-in-sass-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!