引導程序：如何將兩個元素放在另一個上面

Question

是否有任何簡單的方法在Bootstrap中將兩列或兩行安全地放置在彼此之上？我真的不希望我的用戶界面在瀏覽器大小發生變化時中斷。 :)我目前正在使用react-bootstrap，因此可能沒有可用的所有可能（但我仍然可以使用常規Bootstrap中的所有內容）。我有組件，如網格（這些都只是自舉類包裝成反應的組分）：

<Grid> 
    <Row> 
     <Col id="A"></Col> 
     <Col id="B"></Col> 
    </Row> 
</Grid> 

我也將是滿意的，如果沒有設置電網背景的方式，行或上校，同時通過後臺I意味着任何內容 - 不只是圖像，畫筆。

Answer 1

爲每個元素提供display: block以使它們佔據整個行/空間直到100％寬度。

這將符合div的默認行爲。

Grid, Row, Col { 
    display: block; 
} 

對於你的元素的背景，可以設置通過CSS的各元素的背景（其可以是圖像，或者顏色，或者梯度等）。

Grid { 
    background: url("/images/hey.jpg"); 
} 

Row { 
    background-color: red; 
}