Bootstrap "Typ Alignment" in React-Bootstrap

Question

Ich migrieren eine Web-Anwendung mit Bootstrap zu Reagieren und Reagieren-Bootstrap, die beide sind super. Die einzige Sache, die ich nicht in react-bootstrap sehe, ist, wie man Bootstrap type alignment classes wie text-center glatt integriert. Meine App ist verpackt in

<div class="container-fluid text-center"> 

Ich sehe zwei Möglichkeiten, um dieses, aber ich frage mich, ob es eine empfohlene Weg, dies um die nicht so ein Hack ist.

a. Ersetzen Sie mein <Grid> JSX-Tag durch <Grid bsClass="text-center container">. Das scheint gut zu funktionieren, aber ich sehe in der react-bootstrap docs, dass "Im Allgemeinen sollte nur bsClass geändert werden, um neue, nicht Bootstrap, CSS-Stile für eine Komponente bereitzustellen." Ich kann sogar die fluid Stütze zu Grid hinzufügen und sie ändert container zu container-fluid, ohne zu brechen.

b. Wickeln Sie alles in <div className="text-center">. Eines der Dinge, die ich an react-bootstrap liebe, ist der saubere Code ohne eine Zillion extra <div> s, so das ist unelegant.

Wie gesagt, ich frage mich nur, ob es einen bestehenden Weg gibt, dies zu tun. Es wäre schön, einen Kommentar dazu in den Dokumenten react-bootstrap zu haben, da es ein Teil der Bootstrap docs ist, der überhaupt nicht erwähnt zu werden scheint.

Danke!

Answer 1

Ich würde die Klasse manuell mit <Grid className="text-center" > hinzufügen, besonders wenn man bedenkt, dass dies ein einzelnes Element ist, das Ihre App umhüllt und nicht ein Element, das in verschiedenen Situationen wiederverwendet wird.