在一个项目中使用 Bootstrap 和 Flexbox

【问题标题】：Use of Bootstrap and Flexbox in one Project在一个项目中使用 Bootstrap 和 Flexbox
【发布时间】：2017-01-25 03:43:25
【问题描述】：

我正在开发一个基于 React 的前端项目。我只是想知道是否有可能在一个项目中结合使用 Bootstrap 3 和 Flexbox，因为我想利用使用 Bootstrap 组件（使用 react-bootstrap 包）的便利性和 Flexbox 的布局功能，这被毁了与我之前尝试过的引导程序一起使用时。有什么办法可以让它们一起工作？

【问题讨论】：

标签： reactjs twitter-bootstrap-3 flexbox react-bootstrap

【解决方案1】：

.flex-row {
  display: flex;
  flex-wrap: wrap;
}
.flex-row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
.flex-row.row:after, 
.flex-row.row:before {
  display: flex;
}

这适用于 React-Bootstrap：

<Row className="show-grid row-no-padding flex-row">

【讨论】：

顺便说一下，使用 React-Bootstrap：这是最好的解决方案！ react-bootstrap.github.io/components.html

【解决方案2】：

一些 flex css 框架有一个常见的类名，如 row ，col-*，这与引导类名冲突。

你可以试试这个，http://bulma.io/

当然，它提供的不仅仅是网格，但您可以尝试一下。

谢谢！

【讨论】：

【解决方案3】：

显然你的祈祷已经得到回应...... flexbox in Bootstrap

【讨论】：

是的，我知道他们正在使用 bootstrap 4，但我想，还没有使用 Bootstrap 3。对吗？