Bootstrap：如何将两个元素放在一起

Question

在Bootstrap中有没有简单的方法可以安全地将两列或两列放在一起？当浏览器大小发生变化时，我真的不希望我的UI中断。 :)我目前正在使用react-bootstrap，因此可能没有所有可能的可用性（但我仍然可以使用常规Bootstrap中的所有内容）。我有这样的组件网格（这些只是包含在React组件中的Bootstrap类）：

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

如果有一种方法可以设置Grid，Row或Col的背景，我也会感到满意，而背景我指的是任何内容 - 不仅仅是图像，画笔。

Answer 1

为每个元素提供display: block，使其占据整行/空间，直到100％宽度。

这符合div的默认行为。

Grid, Row, Col {
  display: block;
}

对于元素的背景，您可以通过css（可以是图像，颜色或渐变等）设置每个元素的背景。

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

Row {
  background-color: red;
}