Bootstrap 仅限 4 个 flex 网格系统

Question

所以在 bootstrap3 中我们有 'Customize and download' 选项，我们可以只下载我们需要的任何内容。现在 bootstrap 4 支持 flexbox，我只想下载 bootstrap 4 的 flex 网格系统，我再也看不到那个选项了。有什么办法吗？

Answer 1

更新（2019 年 7 月）

随着 v4 you can simply use either bootstrap-grid.css or bootstrap-grid.min.css , it only includes grid system and flex utilities

的发布

旧答案：

在此 Alpha 阶段，您可以根据 bootstrap V4 Alpha docs

在 true/false 之间切换以使用 flexbox（如果使用 CSS 预处理器）

Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet.

How it works:

If you’re familiar with modifying variables in Sass—or any other CSS preprocessor—you’ll be right at home to move into flexbox mode.

Open the _variables.scss file and find the $enable-flex variable.

Change it from false to true.

Recompile, and done!

Alternatively, if you don’t need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. Head to the download page for more information.

Answer 2

2019 年更新，Bootstrap4.3+

您可以使用 bootstrap-grid.css 中包含的 网格仅 Bootstrap ] 4下载。 http://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

这包括网格、弹性框和显示实用程序，但不包括所有实用程序，如边框、间距等。如果你想要进一步的 'Customize and download' 选项，你必须使用 Bootstrap 重建 SASS，或使用像 themestr.app

这样的第 3 方工具

原始答案，Bootstrap 4 alpha（flexbox 可选）

将来可能会有自定义下载，但目前唯一的方法是启用$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 3

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

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

bootstrap-grid 文件只有网格 CSS，没有其他内容，这就是您要查找的内容。

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+

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

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 网格系统

Bootstrap 4 flex grid system only

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4

更新（2019 年 7 月）

旧答案：

对于Bootstrap 5+

SASS 编译

CSS 仅