Как я могу сделать фон строки контейнера Bootstrap на 100% шириной окна? - PullRequest
Новая
       19

Как я могу сделать фон строки контейнера Bootstrap на 100% шириной окна?

1 голос
/ 18 июня 2019

У меня есть контейнер, который хорошо работает для всех размеров.Он имеет фиксированную ширину 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)

1 Ответ

1 голос
/ 19 июня 2019

Если вы хотите сохранить строку внутри контейнера, вы можете добавить рассчитанную отрицательную маржу к строке с помощью 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>
...