Verwendung von Bootstrap und Flexbox in einem Projekt

Question

Ich arbeite an einem Front-End-Projekt basierend auf React. Ich habe mich nur gefragt, ob es eine Möglichkeit gibt, die Verwendung von Bootstrap 3 und Flexbox in einem Projekt zu kombinieren, da ich sowohl die Vorteile von Bootstrap-Komponenten (mit dem react-bootstrap-Paket) als auch die Layout-Funktionen von Flexbox nutzen möchte wenn ich es zusammen mit dem Bootstrap benutze, wie ich es vorher versucht habe. Gibt es eine Möglichkeit, sie zusammenzuarbeiten?

Answer 1

Einige des Flex CSS-Frameworks hat ein gemeinsamen Klassennamen wie row, col-*, die mit den Bootstrap-Klassennamen in Konflikt steht.

Sie können dies versuchen, http://bulma.io/

Natürlich bietet es mehr als ein Gitter, aber man kann ihr nur einen Versuch geben.

Danke!

Answer 2

Apparantly dein Gebet schon beantwortet wird ... flexbox in Bootstrap

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; 
} 

Dies funktioniert mit React-Bootstrap:

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