Question

我有一个目前为止适合所有尺寸的容器。它固定在其预设的Bootstrap宽度上，并且居中。

我想使行的背景颜色延伸到整个窗口而不是容器的整个宽度。

目前，我具有以下基本结构：

<Container>

  <Row>
    <Col>

      data

    </Col>
  </Row>

  <Row style={{backgroundColor: 'grey'}}> //This should be 100% window width
    <Col>

      data

    </Col>
  </Row>

  <Row>
    <Col>

      data

    </Col>
  </Row>

</Container>

（顺便说一下，使用组件而不是<div class="">，因为它是Reactstrap）

Answer 1

如果要将行保留在容器内，可以使用css向行添加计算的负边距，如下所示：

.row {
  background-color: red;
  margin-left: calc((100vw - 100%) / -2) !important;
  padding-left: calc((100vw - 100%) / 2);
  margin-right: calc((100vw - 100%) / -2) !important;
  padding-right: calc((100vw - 100%) / 2);
}

请参见以下示例：

.example-container {
  margin-left: auto;
  margin-right: auto;
  width: 150px;
}

.row{
  background-color: red;
  margin-left: calc((100vw - 100%) / -2) !important;
  padding-left: calc((100vw - 100%) / 2);
  margin-right: calc((100vw - 100%) / -2) !important;
  padding-right: calc((100vw - 100%) / 2);
}

.col {
  background-color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="example-container">
  <div class="row">
    <div class="col">
      Column 1
    </div>
    <div class="col">
      Column 2
    </div>
  </div>
</div>

如何使Bootstrap容器的行背景的窗口宽度变为100％？

1 个答案: