我使用yarn将bootstrap的源代码下载到我的应用程序中
yarn install boostrap
我尝试在我的应用程序中导入bootstrap-grid.css,当我复制starter示例时,外观没有应用网格布局样式。
https://getbootstrap.com/docs/4.0/examples/pricing/
当我添加整个boostrap.css时,它工作正常。
那么除了bootstrap-grid之外,我还应该导入什么来获得布局/网格组件呢?
定价示例使用卡片组和卡片,而不是网格。
如果想要卡片,需要使用bootstrap.css,bootstrap-grid.css专门为网格系统工作。
下面的文件对我有用。我不确定这是否在任何地方都有记载。
functions.scss
variables.scss
mixins.scss
reboot.scss
_grid.scss
为了完成triplethreat23的回答,您还应该导入$grid-gutter-width变量,以便在需要时能够在项目的网格上设置一个装订线。 网格系统可能还需要设置其他变量,请参考官方文档,您应该能够像下面这样添加它们:
/*------------------------------------*\
Grid gutter
\*------------------------------------*/
$grid-gutter-width: 0 !default;
/*------------------------------------*\
Bootstrap file imports
\*------------------------------------*/
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/grid";