如何更換react-bootstrap中的容器類

Question

我安裝了react-bootstrap，並且已經證明我可以使用網格組件，這是我的主要需求。但是爲什麼沒有找到「容器」，我應該如何包裝我的最外層內容，以便我的頁面具有頁邊空白以及其他任何通常由引導程序設置的內容？

我知道我可以使用普通的CSS，但（a）容器不會比較乾淨，無法匹配內部的引導程序，（b）除了邊距外，還有什麼應該包含所有內部的東西以及仍然有它的工作好？

Answer 1

您可以：

• 使用reactstrap LIB包含此Container補償你正在尋找
• 使用引導container CSS類：

<div className="container"> ... </div>

在這兩種情況下， ，<link rel="stylesheet" href="path/to/bootstrap/css/lib">將需要得到這個工作。

Answer 2

React bootstrap實際上有一個「容器」。它的網格組件。

當您將液體屬性應用於它時，它會使「容器」跨越顯示器的寬度。然後像往常一樣，您將應用行組件從反應bootstrap（這基本上是<div class="row"></div>組件），然後您將然後應用組件組件也反應bootstrap（這基本上是<div class="col-md-4"></div> etc html組件。

如果你不想寬度應用到網格容器顯示器的大小，你可以只是簡單地不包括流體屬性，它和它的工作就像一個正常的div容器。

電網遵循像常規引導一樣的12列規則

Answer 3

只需使用：

<Grid bsClass="container"> 
... 
</Grid> 

除了react-bootstrap你也可以在項目中包含的Bootstrap CSS運行：

1. 安裝引導NPM模塊

   npm install --save bootstrap@latest 
   

2. 導入CSS由

   import 'bootstrap/dist/css/bootstrap.css'; 
   

   在您的應用的根組件中。如果您使用create-react-app，則可以使用index.js文件。

3. 現在你可以使用所有的自舉類在你的項目中，像這樣

   <div className="container"></div> 
   

   或

   <Grid className="container"></Grid>