如何使 Bootstrap 容器的行背景变为 100% window 宽度？

Question

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

我想让行的背景色拉伸 window 的整个宽度，而不是容器。

目前我有这样的基本结构：

<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% window 宽度？

How can I make a Bootstrap container's row background go 100% window width?

html

css

twitter-bootstrap

reactjs

reactstrap