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?Verwendung von Bootstrap und Flexbox in einem Projekt
1
A
Antwort
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!
0
Apparantly dein Gebet schon beantwortet wird ... flexbox in 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;
}
Dies funktioniert mit React-Bootstrap:
<Row className="show-grid row-no-padding flex-row">
+0
Übrigens, verwenden Sie React-Bootstrap: Dies ist eine beste Lösung! https://react-bootstrap.github.io/components.html –
Verwandte Themen
- 1. Hinzufügen von Gutter zu bootstrap flexbox grid
- 2. Ist es möglich, flexbox und Bootstrap zu kombinieren?
- 3. Verwendung von Flexbox für Figuren 'figcaption
- 4. CSS Flexbox in einem Formular
- 5. Verwendung von zwei verschiedenen OpenCV-Versionen in einem CMake-Projekt
- 6. Verwendung von Xamarin.Forms in einem ursprünglich nicht-Xamarin.Forms-Projekt
- 7. Verwendung von Go-Code in einem bestehenden C-Projekt
- 8. Verwendung von noweb in einem großen Java-Projekt
- 9. Verwendung von Git-Submodulen in einem git-svn-Projekt
- 10. Flexbox Vertikale und horizontale Mitte mit Bootstrap-Klassen
- 11. Verwendung von cpp-netlib in einem C++ - Projekt unter Windows
- 12. Flexbox sticky Footer Mit mit Bootstrap
- 13. Wechsel zur Verwendung von Bootstrap über npm
- 14. Erstellen von Klassen und ihre Verwendung in Projekt
- 15. Verwendung von SQLite-Datenbank in C# -Projekt und Setup erstellen
- 16. Wie verschachtelte Grids in Bootstrap 4 mit Flexbox
- 17. Hinzufügen von Reagieren in einem Django-Projekt
- 18. Verwendung reagieren mit einem aktuellen Projekt
- 19. Verwendung von undeclared Typ in Swift-Projekt
- 20. Flexbox mit einem scrollbaren Panel
- 21. Zweck der Verwendung von mavenized Bootstrap
- 22. Twitter-bootstrap-rails: Installiert Bootstrap ein Projekt?
- 23. Absolute und Flexbox in React Native
- 24. Übergabe Zeiger zwischen C++ - Projekt und C# -Projekt ohne Verwendung von unsicheren auf C# -Projekt
- 25. Umwandlung von HTML zur Verwendung von Bootstrap
- 26. Wie Bootstrap und weniger verwenden und ein sauberes Projekt behalten?
- 27. Verwendung von neo4j Datenbank im Eclipse Projekt
- 28. Flexbox in einer Flexbox - ist das möglich?
- 29. keine Daten bei der Verwendung von Bootstrap und AngularJS eingeben
- 30. So passen Sie Bootstrap CSS bei Verwendung von Bootstrap-Sass
Ja, ich weiß, dass sie auf ihn mit Bootstrap-4 arbeiten, aber ich denke, nicht mit Bootstrap 3 noch. Recht? – dagitab