在一个项目中使用 Bootstrap 和 Flexbox

Question

我正在做一个基于 React 的前端项目。我只是想知道是否有可能在一个项目中结合使用 Bootstrap 3 和 Flexbox，因为我想利用使用 Bootstrap 组件的便利性（使用 react-bootstrap package) 和 Flexbox 的布局功能，当与 bootstrap 一起使用时会被破坏，就像我之前尝试过的那样。有什么办法可以让他们一起工作吗？

Answer 1

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

Answer 2

一些 flex css 框架有一个常见的 class 名称，如 row 、 col-*，这与 bootstrap class 冲突] 名字。

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

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

谢谢！

Answer 3

.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">

在一个项目中使用 Bootstrap 和 Flexbox

Use of Bootstrap and Flexbox in one Project

flexbox

reactjs

twitter-bootstrap-3

react-bootstrap