twitter-bootstrap 仅限 Bootstrap 4 flex 网格系统

Bootstrap 4 flex grid system only

提问by Manishoo

So in bootstrap3 we had the 'Customize and download' option, which we could download only whatever we needed. Now that bootstrap 4 supports flexbox, I only wanna download the flex grid system of bootstrap 4 and I cant see that option anymore. is there any way to do this ?

所以在 bootstrap3 中我们有“自定义和下载”选项，我们可以只下载我们需要的任何东西。现在 bootstrap 4 支持 flexbox，我只想下载 bootstrap 4 的 flex grid 系统，我再也看不到那个选项了。有没有办法做到这一点？

回答by dippas

UPDATE (JULY 2019)

更新（2019 年 7 月）

With the release of v4you can simply use either bootstrap-grid.cssor bootstrap-grid.min.css, it only includes grid systemand flex utilities

随着v4的发布，您可以简单地使用bootstrap-grid.css或bootstrap-grid.min.css，它只包含网格系统和flex 实用程序

---

---

Old Answer:

旧答案：

At this Alpha stage, you can toggle between true/false for using flexbox (if using a CSS preprocessor) as per bootstrap V4 Alpha docs

在这个 Alpha 阶段，您可以根据bootstrap V4 Alpha 文档在真/假之间切换以使用 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.

Bootstrap 终于支持 Flexbox。通过轻弹变量或交换样式表来选择新的 CSS 布局样式。

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.

1. Open the _variables.scssfile and find the $enable-flexvariable.
2. Change it from falseto true.
3. 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 pagefor more information.

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

1. 打开_variables.scss文件并找到$enable-flex变量。
2. 将其从 更改false为true。
3. 重新编译，大功告成！

或者，如果您不需要源 Sass 文件，您可以将默认的 Bootstrap 编译的 CSS 与编译的 flexbox 变体交换。前往下载页面了解更多信息。

回答by Jacob Raccuia

At the time of answering this question, if you download the compiled .zip found here, it comes with a css folder that has three stylesheets,

在回答这个问题的时候，如果你下载这里找到的编译好的 .zip ，它会附带一个包含三个样式表的 css 文件夹，

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

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

The bootstrap-gridfile has only the grid CSS and nothing else, which is what you're looking for.

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

回答by kenan gündo?an

if you just want to use flex-grid. I recommend

如果您只想使用 flex-grid。我建议

https://www.flexible-grid.com

https://www.flexible-grid.com

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

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

回答by Zim

Update 2019, Bootstrap 4.3+

2019 年更新，Bootstrap 4.3+

You can get the grid onlyusing bootstrap-grid.cssincluded in the Bootstrap 4 download. http://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

您只能使用Bootstrap 4 下载中包含的bootstrap-grid.css来获取网格。http://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

This includes the grid, flexbox and display utilities, but not all the utilities like the borders, spacing, etc.. If you want a further 'Customize and download' option you must rebuild Bootstrap using SASS, or use a 3rd party tool like themestr.app

这包括电网，实现Flexbox和显示公用设施，但不是所有像边界公用事业，间距等。如果您想进一步的“定制和下载”选项，则必须使用SASS重建引导，或使用第三方工具，如themestr 。应用程序

---

---

Original Answer, Bootstrap 4 alpha (flexbox optional)

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

There may be customizable downloads in the future, but the only way currently is to enable the $enable-flexvariable. Here's an example using SASS.

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

$enable-flex:true;

$enable-flex:true;

http://codeply.com/go/JbGGN4Ok3A

http://codeply.com/go/JbGGN4Ok3A

As of Bootstrap 4 alpha 6, flexbox is now the default: http://www.codeply.com/go/p/bootstrap_4.0.alpha.6

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