淘先锋技术网

首页 1 2 3 4 5 6 7

我使用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";