react-bootstrap中的Bootstrap「type alignment」

Question

我正在將使用Bootstrap構建的Web應用程序遷移到React和react-bootstrap，兩者都很棒。在react-bootstrap中我沒有看到的一件事是如何平滑集成Bootstrap的type alignment classes，如text-center。我的應用程序被包裹在

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

我看到周圍這兩種方式，但我不知道是否有解決這個建議的方式，是不是這樣的黑客。

a。將我的<Grid> JSX標記替換爲<Grid bsClass="text-center container">。這似乎工作正常，但我在react-bootstrap docs中看到：「通常，應該只更改bsClass以爲組件提供新的非Bootstrap CSS樣式。」我甚至可以將fluid支柱添加到Grid，並且它將container更改爲container-fluid而不會中斷。

b。將所有內容都包裹在<div className="text-center">之中。我喜歡react-bootstrap的其中一件事是乾淨的代碼，沒有多餘的<div> s，所以這是不雅的。

正如我所說，只是想知道是否有現有的方法來做到這一點。在react-bootstrap文檔中對此有一些評論是很好的，因爲它是Bootstrap docs的一部分，似乎根本沒有提及。

謝謝！

Answer 1

我會用<Grid className="text-center" >手動添加該類，尤其是考慮到您提到這是一個包裝應用程序的單個元素，而不是在不同情況下將被重用的元素。