如何使用Desktop First方法构建Bootstrap 4

时间:2017-10-04 12:47:16

标签: css twitter-bootstrap sass

简单问题:Bootstrap现在是“Mobile-First”。如何将其更改回“桌面优先”,我的意思是使用“屏幕低于”方法,而不是“屏幕高于”。他们确实在他们自己的文档中使用media-breakpoint-down mixins提供了一些这方面的提示,但是我还没有能够让它工作。

任何帮助都将不胜感激。

稍后编辑:我的问题是我如何修改原始文件,以便在使用cmd的npm build命令构建bootstrap dist文件时可以获得此结果。就这样。我在一个独立于bootstrap的.css文件中编写自己的css

后来的Edit2:如果我不清楚我想要什么,当你构建bootstrap时,默认它是在构建媒体查询时使用@ media-breakpoint-up系统以及它如何构建编译的css(没有媒体查询)移动,最小宽度:576px,依此类推)。如何让它使用@ media-breakpoint-down反向编译它,所以它没有媒体查询超过1200px然后lg为最大1199,依此类推,并在下降的过程中进行。

1 个答案:

答案 0 :(得分:1)

您可以使用:

@include media-breakpoint-down(xs) { 
   //your code
 }

这将转化为:

@media (max-width: 576px) {
   //your code
}

特定屏幕的选项为xs, sm, md, lg, xl