Обтекание столбцов при использовании React-Boostrap на сайте Gatsby stati c - PullRequest
Новая
       37

Обтекание столбцов при использовании React-Boostrap на сайте Gatsby stati c

0 голосов
/ 17 января 2020

Столбцы в строке переносятся, хотя xs = {..} добавляют до 12. Это происходит на всех размерах экрана. Я проверил следующие вопросы и отчеты об ошибках, но они не помогли:

SO Вопрос: Bootstrap Обтекание столбцов xs

Gatsby Github Выпуск: https://github.com/gatsbyjs/gatsby/issues/17914

Обход проблемы не помог мне.

Версии:

  • "gatsby": "^ 2.18.5",
  • "response- bootstrap": "^ 1.0.0-beta. 16 "
  • " bootstrap ":" ^ 4.4.1 "
  • " реагировать ":" ^ 16.12.0 ",

Фрагмент кода: 

    <React.Fragment>
      <Container>
        <Row>
          {
            tech["name"].map(db => {
              let icon = svgs[toLower(db)];
              return(
                <Col xs={colSize}>
                  <Container>
                    <Row>
                      <Col xs={4} style={{"maxHeight": "100px", "maxWidth": "100px"}}>
                        <img src={icon} alt={db}/>
                      </Col>
                      <Col xs={8}>
                        <h5>{db}</h5>
                      </Col>
                    </Row>
                  </Container>
                </Col>
              )
            })
          }
        </Row>
      </Container>
    </React.Fragment>

Сгенерировано HTML: Generated HTML

4-й столбец (SQL Сервер) охватывает The 4th column wraps

Элементы отображаются правильно после перезагрузки Elements are rendered correctly after reload

Ссылка на сайт: https://tokern.io/cheat_sheet/

1 Ответ

2 голосов
/ 19 января 2020

Вы добавляете заполнение к блоку и используете режим размера блока по умолчанию. Чтобы понять, почему это проблематично c, просмотрите документацию по размерам коробок на MDN или в этой статье о размерах коробок на CSS Трюки .

решить проблему, добавив box-sizing: border-box к объявлению .col.

...