我正在为项目使用最新的bootstrap.我对bootstraps移动第一个approch和较少的文件结构感到困惑
我的文件结构是
---css
---js
---less
---mixins
-----..
-----...
----Custom_files
---------main.less
--------- component1.less
--------- component2.less
我的所有自定义文件都存在于自定义文件文件夹中 我试图为自定义css生成不同的样式表,而不触及bootstrap.min.css
在main.less文件中,我导入了所有组件较少的文件(component1.less,components.less)
为了实现移动第一个approch,在每个组件文件中我都将移动样式作为默认样式规则和文件最后的桌面样式包含在内
/****Default Styles go here(mobile)***/
....
/**************************************/
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
/***Desktop styles***/
}
@media(min-width:1200px){}
我的问题是当生成css时,它看起来像一个混乱,作为默认的CSS和媒体查询的组合,而不是先有默认的CSS,然后是媒体查询
/****Default Styles goes here(mobile)***/
....
/**************************************/
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
/***Desktop styles***/
}
@media(min-width:1200px){}
/****Default Styles goes here(mobile)***/
....
/**************************************/
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
/***Desktop styles***/
}
@media(min-width:1200px){}
/****Default Styles goes here(mobile)***/
....
/**************************************/
......
这个可以吗？或者,如果它是错的,那么正确的做法是什么