适用于 Bootstrap 5+

Question

所以在bootstrap3中，我们进行了“自定义和下载”＃39;选项，我们只能下载我们需要的任何内容。现在bootstrap 4支持flexbox，我只想下载bootstrap 4的flex网格系统，我再也看不到该选项了。有没有办法做到这一点？

Answer 1

在回答此问题时，如果您下载已编译的.zip here，它会附带一个包含三个样式表的css文件夹，

bootstrap-grid.css
bootstrap-normalize.css
bootstrap.css

bootstrap-grid文件只有网格CSS，没有别的，这就是你要找的。

Answer 2

在此Alpha阶段，您可以根据bootstrap V4 Alpha docs使用flexbox（如果使用CSS预处理器）在true / false之间切换

Flexbox支持终于来到了Bootstrap。选择加入新的CSS 轻弹变量或交换a的布局样式样式表。

How it works:

如果您熟悉在Sass或任何其他CSS中修改变量   预处理器 - 你将在家中进入flexbox模式。


打开_variables.scss文件，找到$enable-flex变量。

将其从false更改为true。

重新编译，完成！

或者，如果您不需要源Sass文件，则可以交换   使用已编译的flexbox的默认Bootstrap编译的CSS   变异。 Head to the download page了解更多信息。

Answer 3

将来可能会有可自定义的下载，但目前唯一的方法是启用$enable-flex变量。这是使用SASS的一个例子。

$enable-flex:true;

http://codeply.com/go/JbGGN4Ok3A

更新：从Bootstrap 4 alpha 6开始，flexbox现在是默认设置： http://www.codeply.com/go/p/bootstrap_4.0.alpha.6

Answer 4

如果你只想使用flex-grid。我推荐

https://www.flexible-grid.com

https://github.com/kenangundogan/flexible-grid

flexible-grid/
    ├── scss
        ├── flexible-grid.scss
        ├── _variables.scss
        ├── _definitions.scss
        ├── _wrapper.scss
        ├── _array-list.scss
        ├── _attribute.scss
        ├── _grid.scss
        └── _normalize.scss

Answer 5

适用于 Bootstrap 5+

使用您的包管理器（例如 node_modules）安装到 yarn add bootstrap@5 后：

SASS 编译

这通常是首选，因为您可以在编译时调整变量值（有关详细信息，请参阅 their docs）

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import '../node_modules/bootstrap/scss/functions';

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/mixins';

// 4. Include any optional Bootstrap components as you like
@import '../node_modules/bootstrap/scss/bootstrap-grid.scss';

仅 CSS

@import '../node_modules/bootstrap/dist/css/bootstrap-grid.css';

// or for a minified version 

@import '../node_modules/bootstrap/dist/css/bootstrap-grid.min.css';

仅Bootstrap 4 flex网格系统

5 个答案:

适用于 Bootstrap 5+

SASS 编译

仅 CSS